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中，我必须准确显示八行描述，其中描述来自数据库，大小可能或多或少。最后一行将在最后截断...。我怎样才能实现目标？

请帮助我。

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，您可以减去它以获得高度

这很有趣，如果您有任何问题，请在评论中不要犹豫。

Answer 2

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

编辑：

思想ID只是发布您需要查看的准确测量内容

Imagick :: queryFontMetrics＆lt; - 谷歌和阅读几页，PHP文档不是很有用

元素可以包含多少行

2 个答案: