对于支持它的浏览器(大多数现代浏览器)，只需使用行夹，对于较老的浏览器则退回到一行。

  .text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;


    @supports (-webkit-line-clamp: 2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: initial;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

浏览器支持

我将这些css属性用于行省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical;

-webkit-line-clamp: 3;是在…之后的行数(3行)所示。

我以前遇到过这个问题，没有纯css解决方案

这就是为什么我开发了一个小型库来处理这个问题(以及其他问题)。标准库提供了用于建模和执行字母级文本呈现的对象。例如，您可以模拟带有任意限制的text-overflow:省略号(不一定只有一行)

请在http://www.samuelrossille.com/home/jstext.html上阅读更多截图、教程和下载链接。

这应该在webkit浏览器中工作:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

浏览器支持

div { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } * { font-family: verdana; } <div> The <b><a target='_blank' href='https://developer.mozilla.org/docs/Web/CSS/-webkit-line-clamp'>-webkit-line-clamp</a></b> CSS property allows limiting of the contents of a block container to the specified number of lines. It only works in combination with the display property set to <b>-webkit-box</b> or <b>-webkit-inline-box</b> and the <b>-webkit-box-orient</b> property set to vertical. In most cases you will also want to set overflow to hidden, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines. When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end. </div>

这是一个纯css的好例子。

.container{ width: 200px; } .block-with-text { overflow: hidden; position: relative; line-height: 1.2em; max-height: 3.6em; text-align: justify; margin-right: -1em; padding-right: 1em; } .block-with-text+.block-with-text{ margin-top:10px; } .block-with-text:before { content: '...'; position: absolute; right: 0; bottom: 0; } .block-with-text:after { content: ''; position: absolute; right: 0; width: 1em; height: 1em; margin-top: 0.2em; background: white; } <div class="container"> <div class="block-with-text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a </div> <div class="block-with-text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class="block-with-text"> Lorem Ipsum is simply </div> </div>

如果有人正在使用SASS/SCSS，并偶然发现了这个问题-也许这个mixin可以帮助:

@mixin line-clamp($numLines : 1, $lineHeight: 1.412) {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: block;
  /* autoprefixer: off */
  display: -webkit-box;
  -webkit-line-clamp: $numLines;
  -webkit-box-orient: vertical;
  max-height: $numLines * $lineHeight + unquote('em');
}

这只在webkit浏览器中添加省略号。休息只是把它切断了。