如何計算一堆文本在div內繞行的行數？

Question

我有一個從其中的數據庫加載文本的div。我無法控制文本的長度，並且想要計算或計算它包裝的行數，因此我可以在開始時隱藏除了小段以外的所有內容，直到用戶單擊「更多」爲止。 有沒有什麼辦法可以用JavaScript做到這一點？

在此先感謝。

Answer 1

在我的意見，你必須做到這一點使用漸進增強的2路：

1）寫在它所有的文本，然後使用JavaScript來瓦解它 （拆分爲斷行）（放置例如「...」鏈接顯示所有div）

2）生成服務器端的href鏈接「...」，點擊後會使文本爆炸，頁面/內容加載中的 將替換「a 「鏈接，並使其使用ajax電話。

我將使用第二個選項。

Answer 2

你應該能夠做到這一點，檢索div的高度，併除以字體的行高，假設div的高度是由它的內容量控制的。

document.getElementById('my_div').offsetHeight; 

和

document.getElementById('my_div').style.lineHeight; 

Answer 3

使用元素與overflow: hidden，並更改樣式當他們點擊更多。

HTML：

<div> 
    <div id='content'>...</div> 
    <div><a id='morebutton'>More</a></div> 
</div> 

CSS：

#content { 
    height: 200px; 
    overflow: hidden; 
} 

JS（使用jQuery）：

$("#morebutton").click(function() { 
    $("#content").css(overflow: "visible"); 
}