我发现Skeep的回答是不够的，还需要一个溢出样式:

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

它是一个非标准的CSS，当前版本的CSS中没有涵盖它(Firefox不支持它)。尝试使用JavaScript。

我以前使用过jquery - condensed -plugin，看起来它可以做你想做的事情。如果不是，有不同的插件可以满足您的需求。

编辑:给你做了一个演示-注意，我在演示中链接了jquery. condene .js，这是有魔力的，所以完全归功于该插件的作者:)

文本溢出的要求:省略号;工作是一行的空白(pre, nowrap等)。这意味着文本永远不会到达第二行。

因此。在纯CSS中是不可能的。

当我正在寻找完全相同的东西时，我的来源:http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

编辑如果好的CSS神将实现http://www.w3.org/TR/css-overflow-3/#max-lines，我们可以在纯CSS中使用fragments(新)和max-lines(新)。还有一些关于http://css-tricks.com/line-clampin/的更多信息

编辑2 WebKit/Blink有line-clamp: -webkit-line-clamp: 2将把省略号放在第二行。

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

  .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的好例子。

.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>