使用jQuery单独处理包装线

Question

我正在寻找一种单独处理＆lt; div＆gt;中的行的方法由于宽度窄而被包裹。也就是说，如果我的文字是“Lorem ipsum dolor sit amet lorem \ n ipsum dolor sit amet”，如下所示：

Lorem ipsum dolor
坐在一个lorem
ipsum dolor坐着 阿梅特

然后我应该能够将每个“行”封装在一个，例如＆lt; span＆gt;标签，例如：

＆lt; span id =“line0”＆gt; Lorem ipsum dolor＆lt; span＆gt;
＆lt; span id =“line1”＆gt; sit amet lorem＆lt; / span＆gt;
......等等。

编辑：我们可以假设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位置找出每条线的起点/终点。