元素可以包含多少行

假设我有一个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我必须准确显示八行描述的内容描述涉及表格数据库和大小可能不或多或少。最后一行将以...截尾。我怎样才能实现我的目标？

请帮助我。

来源

2011-11-28 thecodeparadox

可能有一些用途：http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript –

绝对没有，因为用户仍然可以通过改变缩放和文本大小设置浏览器，无论你的CSS。 – DaveRandom

@DaveRandom是的，我明白你的意思。谢谢 – thecodeparadox

是的，有一种方法只能显示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，你可以到。减去获得的高度。

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

来源

2011-11-28 16:15:48

我编辑了我的问题。任何解决方案 – thecodeparadox

@theCodeParadox是的，我编辑了我的答案。 –

只有当您使用等宽字体（具有固定字符尺寸的字体）。如果您不使用等宽字体，而且您需要非常好的准确性，那么您可能需要通过创建和读取文本图像或阅读字符映射来查看imagick类型的解决方案。至少可以说是过分的。

编辑：

认为Id只是张贴了你所需要的是在寻找在精确测量

Imagick :: queryFontMetrics < - 谷歌，读了几页，该PHP文件并非非常有用

来源

2011-11-28 16:07:26 Lee

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

@李编辑我的问题。任何解决方案 – thecodeparadox

元素可以包含多少行

回答

相关问题