一个元素可以包含多少行答案

【问题标题】：How many lines an Element can contain一个元素可以包含多少行
【发布时间】：2012-01-08 01:51:27
【问题描述】：

假设我有一个带有height: 150px 和width:300px 的div 元素。如果没有overflow，是否可以计算其中可以驻留多少行文本，其中文本已预定义font-size、line-height 和其他文本属性？

我的主要目标：

我有这样的html：

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

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

请帮帮我。

【问题讨论】：

可能有一些用处：stackoverflow.com/questions/118241/…
绝对不行，因为用户仍然可以通过更改浏览器中的缩放和文本大小设置来解决这个问题，而不管你的 CSS 是什么。
@DaveRandom 是的，我理解你。谢谢

标签： php javascript jquery html css

【解决方案1】：

仅当您使用等宽字体（具有固定字符尺寸的字体）时。如果您不使用等宽字体并且您需要非常好的准确性，那么您可能需要通过创建和阅读文本图像或阅读字符图来研究 imagick 类型的解决方案。这至少可以说是矫枉过正。

编辑：

Thought id 只是发布您需要查看的内容以进行准确测量

Imagick::queryFontMetrics

【讨论】：

我相信 OP 在这里谈论的是线条的高度。在这种情况下，无论是什么字体，是否等宽字体都没有关系。

【解决方案2】：

是的，有一种方法只显示 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，您可以将它们相减以获得高度。

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

【讨论】：