元素可以包含多少行

假設我有一個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

元素可以包含多少行

回答

相關問題