Question

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

我在div中有3行文字，比例有限。如果文本太长，我想像文本溢出属性一样附加'...'，除了我只能在一行文本上工作。

看看：

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

Answer 2

你可以这样使用：---

 .titlearea{  
     text-overflow: ellipsis;        // IE 6+, FF 7+, Op 11+, Saf 1.3+, Chr 1+
     -o-text-overflow: ellipsis;     // for Opera 9 & 10
      -ms-text-overflow: ellipsis;   //IE 8
   }

Answer 3

您可以使用

    <h1 class="titlearea" style="text-overflow:ellipsis;"> 
Joe Soap told me this morning that he burnt his toast badly</h1>

Answer 4

我认为目前没有一种可靠的方法只使用CSS来实现这一目标。我找到了这个：http://codepen.io/Merri/pen/Dsuim

您可以看到用于webkit浏览器方法的奇怪Flex Box。但他们也向你展示了clamp.js

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

4 个答案: