php - 一个元素可以包含多少行

Question

假设我有一个 div 元素，其 height: 150px 和 width:300px。是否可以计算在没有 overflow 的情况下可以容纳多少行文本，其中文本已经预定义了 font-size、line-height 和其他文本属性？

我的主要目标:

我有这样的 html:

<div id="parent">
    <div>[Title]</div>
    <div>[Description]</div>
    <div>[Buttons]</div>
</div>

在 [Description] div 中，我必须准确显示 八行 描述，其中描述来自 DB，大小可能或多或少.最后几行将在末尾 chop ... 。我怎样才能实现我的目标？

请帮助我。

Answer 1

是的，有一种方法可以只显示 8 行。基本上，您可以做的是单独添加每个单词，每次添加单词时，检查您的 div 的高度是否发生了变化。统计变化了多少次，超过8次就停止加词。

var text = "Lorem ipsum dolor sit amet...";

var changesInHeight = 0,
    prevHeight = 0,
    words = text.split(" ");
    div = document.getElementsByTagName("div")[0];
for(var i = 0; i < words.length; i++) {
    var prevText = div.innerHTML;
    div.innerHTML += words[i] + " ";

    var height = div.getClientRects()[0].height;
    if (height > prevHeight)
        changesInHeight++;
    prevHeight = height;

    if (changesInHeight > 8) {
        div.innerHTML = prevText + "...";
        break;
    } 
}

Live example

如果你需要支持 IE，getClientRects()[0] 将没有 height 属性，但它有一个 bottom和 top 您可以减去它以获得高度。

这很有趣，如果您有任何问题，请随时在评论中提问。