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

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

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);
}

如果有人正在使用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浏览器中添加省略号。休息只是把它切断了。

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

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

正如其他人已经回答的那样，纯CSS解决方案是不存在的。 jQuery有一个非常好用的插件，它叫dotdotdot。 它使用容器的宽度和高度来计算是否需要截断和添加省略号。

$("#multilinedElement").dotdotdot();

这是一个jsFiddle。

纯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;
}