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

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

纯css方式用省略号修饰多行文本

调整文本容器的高度， 用-webkit-line-clamp控制断线:2;

.block-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 30px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

这是一个纯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 helper mixin:

对于那些使用像Sass这样的预处理器的人来说，你可以有一个mixin，它有一个可选的参数，叫做lines，默认为1，这使得它非常方便地应用一个元素的文本截断，并在你需要的时候改变行数:

@mixin text-ellipsis($lines: 1) {
    text-overflow: ellipsis;
    overflow: hidden;
    @if ($lines > 1) {
        display: -webkit-box;
        -webkit-line-clamp: $lines;
        -webkit-box-orient: vertical;
    } @else {
        white-space: nowrap;
    }
}

用法:

.some-title {
    @include text-ellipsis($lines: 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;
    }
  }

浏览器支持

没有简单的方法。使用clip .js库。

$clamp(myHeader, {clamp: 3});