75个字符

我已经尝试了最大宽度，但这打乱了我的布局。

使用max-width: 75ch，然后创建一个布局，当你超过这个宽度时不会乱。

这在CSS中是不可能的，你必须使用Javascript。虽然你可以设置p的宽度为30个字符，下一个字母会自动下来，但这不会那么准确，如果字符是大写的，会有所不同。

纯CSS解决方案截断多行字符

我有一个类似的问题，并从Hackingui.com找到了这个优秀的css解决方案。您可以阅读文章获取信息，但下面是主要代码。

我测试过了，效果很好。希望有人在选择JS或服务器端选项之前发现它有用

  /* styles for '...' */ 
.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 3.6em; 
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: justify;  
  /* place for '...' */
  margin-right: -1em;
  padding-right: 1em;
}

/* create the ... */
.block-with-text:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
}

/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
}

你可以看看你的字体有多宽，然后取平均字符像素大小。然后再乘以你想要的字符数。这有点俗气，但它是一种快速的解决方法。

您总是可以通过设置max-width和溢出省略号来使用截断方法

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

一个例子:

.wrapper { padding: 20px; background: #eaeaea; max-width: 400px; margin: 50px auto; } .demo-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .demo-2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 150px; } <div class="wrapper"> <p class="demo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p> </div> <div class="wrapper"> <p class="demo-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p> </div>

对于多行截断，请查看flex解决方案。 一个截断3行的示例。

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

一个例子:

p { 空白：无换行; 溢出：隐藏; 文本溢出：省略号; 最大宽度：200px; } <p>Lorem ipsum dolor sit amet， consectetur adipisicing elit.Deserunt rem odit quis quaerat.In dolorem praesentium velit ea esse consequuntur fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet！</p>

用两种不同的方法试试我的解决方案。

<div class="wrapper">
      <p class="demo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

<div class="wrapper">
  <p class="demo-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 400px;
  margin: 50px auto;
}

.demo-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.demo-2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
}