0

我可以使用该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 行。（对于每个浏览器，它会有所不同，尤其是移动设备））。

4

4 回答 4

1

你可以像这样使用：---

 .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
   }
于 2013-07-12T09:27:55.677 回答
1

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

-webkit-line-clamp

我过去用过它，它工作正常。

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

于 2013-07-12T09:11:06.237 回答
0

您可以使用

    <h1 class="titlearea" style="text-overflow:ellipsis;"> 
Joe Soap told me this morning that he burnt his toast badly</h1>
于 2013-07-12T09:10:14.343 回答
0

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

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

于 2013-07-12T10:56:22.860 回答