css - 我可以使用 text-overflow 属性来修剪显示在多行上的文本吗？

Question

我可以使用 text-overflow: ellipsis; 属性将“...”附加到多行文本元素的末尾吗？

我在一个 div 中有 3 行文本，比例受限。如果文本太长，我希望像 text-overflow 属性一样附加“...”，但我只能让它在一行文本上工作。

看看:

HTML

<h1 class="titlearea">Joe Soap told me this morning that he burnt his toast badly</h1>

CSS

.titlearea {
line-height: 1;
font-size: 25px;
height: 75px;
overflow: hidden;
}

期望的结果:

Joe Soap told
me this morning
that he burnt...

如果有人感兴趣，这里将是一个 JavaScript 答案:

$('.titlearea').each(function() {
    var that = $(this),
        title = that.text(),
        chars = title.length;
    if (chars > 75) {
        var newTitle = title.substring(0, 73) + "...";
        that.text(newTitle);
    }
});

不过我宁愿不使用 JavaScript，因为它不是确定文本是否需要修剪的好方法:因为如果单词太长，文本将换行到下一行。 (即有时会产生无法以这种方式解释的大空格)。

那么我可以只使用 CSS 来实现吗？

编辑:使用'em'怎么样？如果我的字体大小是 25px，高度是 3em，这是否等于 75px 的高度？ (因此，确保 div 在 3 行之后结束，而不是 3 行和一点点行，导致字母的顶部出现在第 4 行。(每个浏览器都会有所不同，尤其是移动浏览器)。

Answer 1

对于 webkit 浏览器，您可以探索:

-webkit-line-clamp

我过去用过它，效果很好。

http://dropshado.ws/post/1015351370/webkit-line-clamp