p{
line-height: 20px;
width: 157px;
white-space: nowrap; 
overflow: hidden;
text-overflow: ellipsis;
}

或者我们可以通过使用和高度和溢出来限制行。

如果您想对单行文本应用省略号(…)，CSS通过text-overflow属性使之变得有些容易。这仍然有点棘手(由于所有的要求-请参阅下面)，但文本溢出使它成为可能和可靠的。

然而，如果您想在多行文本上使用省略号——就像这里的情况一样——那么就别指望有什么乐趣了。CSS没有标准的方法来做到这一点，而且变通方法是随机的。

单行文本的省略

使用文本溢出，省略号可以应用于单行文本。CSS的要求如下:

必须有一个宽度，最大宽度或弹性基础 必须有空白:nowrap 必须有溢出的值而不是可见的 必须显示:块或内联块 (或功能对等物，如伸缩项目)。

这是可行的:

p { width: 200px; white-space: nowrap; overflow: hidden; display: inline-block; text-overflow: ellipsis; border: 1px solid #ddd; margin: 0; } <p> This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. </p>

新美国jsFiddle

但是，尝试删除宽度，或让溢出默认为可见，或删除空白:nowrap，或使用块容器元素以外的东西，AND，省略号失败得很惨。

这里有一个重要的结论:text-overflow:省略号对多行文本没有影响。(仅white-space: nowrap要求就消除了这种可能性。)

p { width: 200px; /* white-space: nowrap; */ height: 90px; /* new */ overflow: hidden; display: inline-block; text-overflow: ellipsis; border: 1px solid #ddd; margin: 0; } <p> This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. </p>

新美国jsFiddle

多行文本的省略

因为CSS在多行文本上没有省略号属性，所以创建了各种变通方法。这些方法可以在这里找到:

jQuery dotdotdot…… 行截断(截断多行文本) CSS省略:如何在纯CSS中管理多行省略 多行文本截断的纯CSS解决方案

上面的Mobify链接被删除了，现在引用了archive.org的副本，但似乎在这个代码依赖中实现了。

在浏览了整个互联网并尝试了很多这些选项后，唯一能确保它正确覆盖支持i.e.的方法是通过javascript，我创建了一个循环函数来查看需要多行截断的post项目。

*注意我使用Jquery，并要求你的post__items类有一个固定的最大高度。

// loop over post items
$('.post__items').each(function(){
    var textArray = $(this).text().split(' ');
    while($(this).prop('scrollHeight') > $(this).prop('offsetHeight')) {
        textArray.pop();
        $(this).text(textArray.join(' ') + '...');
     }
});

这个人有最好的解决办法。css:

.multiline-ellipsis {
    display: block;
    display: -webkit-box;
    max-width: 400px;
    height: 109.2px;
    margin: 0 auto;
    font-size: 26px;
    line-height: 1.4;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

不幸的是，在CSS的当前状态下没有。

省略号渲染有一个先决条件:空白:nowrap，这实际上意味着:省略号只在单行文本容器上绘制。

糟糕的CSS不支持跨浏览器多行夹紧，只有webkit似乎在推动它。

你可以尝试使用一个简单的Javascript省略号库，比如github上的Ellipsity，源代码非常干净和小，所以如果你确实需要做任何额外的改变，它应该很容易。

https://github.com/Xela101/Ellipsity