文本溢出的要求:省略号;工作是一行的空白(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将把省略号放在第二行。

迟回复，但一个html换行也可以，所以你可以做一个html + css唯一的解决方案。所以通常使用br元素是不好的做法，但如果你用br打断了注释，text-overflow省略号将从html文本的下一行开始。

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

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

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

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

文本溢出的要求:省略号;工作是一行的空白(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将把省略号放在第二行。

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

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