如何通過JavaScript獲取文本的第n行？

考慮一個簡單的HTML元素作爲如何通過JavaScript獲取文本的第n行？

<div id="test"> 
a long text without line break 
</div>

該瀏覽器將創建基於字形和字體大小線。在瀏覽器進行文本排列之後（例如，根據窗口寬度），如何通過獲得文本的行JavaScript？

例如：

如何獲得線
如何獲得第一行出現在當前窗口的總數是多少？
如何獲得第n行？

來源

2014-01-06 Googlebot

什麼構成一條線？ – Prisoner

我懷疑2和3可以解決。 – Prinzhorn

@Prisoner我們目前在屏幕上看到的！瀏覽器創建的行顯示長文本。 – Googlebot

不，沒有API可讓您在佈局發生後訪問呈現的文本。唯一可以近似的方法是非常黑客，即每次將一個單詞添加到一個容器中，並查看它何時改變高度。請參閱此相關的問題：

detecting line-breaks with jQuery?

呀，誰想得到它，即使jQuery的不會做到這一點！ ;-)

來源

2014-01-06 14:15:21 ColinE

2簡單的解決方案和一個非常困難的。

格式化文本。

內部預&的textContent

HTML

<pre>hello 
hello1 
hello2</pre>

document.getElementsByTagName('pre')[0].textContent.split('\n')

http://jsfiddle.net/gq9t3/1/

添加BR的

裏面搭配BR &的textContent一個div

HTML

<div>hello<br>hello1<br>hello2<br>pizza</div>

document.getElementsByTagName('div')[0].innerHTML.split('<br>')

http://jsfiddle.net/gq9t3/4/

要麻煩得多

CSS

div{width:100px;line-height:20px;}

HTML

<div>hello dfgfhdhdgh fgdh fdghf gfdh fdgh hello1gfhd gh gh dfghd dfgh dhgf gf g dgh hello2</div>

document.getElementsByTagName('div')[0].offsetHeight/20

簡單的方法來找到行數，但您需要計算文本寬度以查找相應的行內容。

http://jsfiddle.net/gq9t3/3/

來源

2014-01-06 14:43:33 cocco

我想知道瀏覽器如何安排線路，現在我自己已經斷線了。 – Googlebot

是的，我明白了。但是這背後有很多工作。我在2-3個答案中談到了這個問題。 http://stackoverflow.com/a/20691677/2450730 http://stackoverflow.com/a/20792951/2450730 ...你想做什麼幾乎是不可能的。這些答案更多地討論文本格式。但關鍵是你無法控制瀏覽器的格式。每個瀏覽器都不同。唯一的辦法就是計算一切。 – cocco

第三個解決方案是您的問題的基本答案。1.獲取行高，2.爲每個單詞計算寬度並將其添加到新元素中，3.如果寬度大於最大寬度，則創建一個新元素（線）...等等。 – cocco

如何通過JavaScript獲取文本的第n行？

回答

相關問題