使用jQuery分別處理包裝線

Question

我正在尋找一種方法來分別處理<div>中由於寬度較窄而纏繞的線條。也就是說，如果我的文字是「Lorem存有悲坐阿梅德LOREM \ n存有悲坐阿梅德」，它被看作是如下：

Lorem存有悲
坐阿梅德LOREM
存有悲坐
阿梅德

然後，我應該能夠封裝每個 '行' 的，比方說，<跨度>標籤，如：

<跨度ID = 「line0」 > Lorem存有悲<跨度>
<跨度ID = 「LINE-1」 >坐阿梅德LOREM </SPAN >
...等

編輯：我們可以假設div的寬度和高度是固定的和已知的。

我找不到建議的解決方案（如果有的話）;雖然有一個很好的建議爲計數爲固定行高線：How to check for # of lines using jQuery

Answer 1

與此開始：

<div class="narrow">Lorem ipsum dolor sit amet lorem ipsum dolor sit amet</div> 

CSS：

.narrow { 
    width:60px; 
} 

插入一些佔位符那裏有空格：

$('.narrow').html($('.narrow').html().replace(/ /g,"<span class='count'> </span>")) 

確定每個佔位符的y位置：

$('.narrow .count') .each(function() { 
    var myPos = $(this).position() 
    alert(myPos.top) 
}) 

從那裏，你應該能夠找出其中基於其y位置的每一行的開始/結束點。