一个元素可以包含多少行

How many lines an Element can contain

本文关键字：包含 多少 元素 一个      更新时间：2023-09-26

假设我有一个包含height: 150px和width:300px的div元素。是否有可能计算有多少行文本可以驻留在它没有overflow，其中文本有预定义的font-size, line-height和其他文本属性?

My Main Objective:

我有这样的html:

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

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

请帮帮我。

是的，有一种方法只显示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;
    } 
}
<<p> 生活例子/strong>

如果你需要支持IE, getClientRects()[0]不会有height属性，但它有bottom和top，你可以减去它们来得到高度。

很有趣，如果你有任何问题，请在评论中提问。

仅当您使用等宽字体(具有固定字符尺寸的字体)时。如果你不使用等宽字体，而又需要很高的准确性，那么你可能需要通过创建和读取文本图像或读取字符图来寻找图像类型解决方案。至少可以这么说，这太过分了。

编辑:

我只是想把你需要看的东西贴出来，以便进行准确的测量

Imagick::queryFontMetrics <——谷歌一下，读几页，PHP文档不是很有用

相关文章：