使用jQuery单独处理换行

Separately processing wrapped lines using jQuery

本文关键字：换行 处理 单独 jQuery 使用      更新时间：2023-09-26

我正在寻找一种方法来单独处理<div>由于宽度窄而被包裹。也就是说，如果我的文本是"Lorem ipsum悲哀坐amet Lorem''n ipsum多尔坐amet"，它如下所示：

Lorem ipsum悲哀
坐amet lorem
ipsum悲哀坐
amet

然后我应该能够将每个"行"封装在一个，比如<span>标签，例如：

<span id="line0">Lorem ipsum dolor<span>
<span id="line1">坐amet lorem<span>
…等

编辑：我们可以假设div的宽度和高度是固定的，并且是已知的。

我找不到一个拟议的解决方案，如果有的话；尽管有一个很好的建议可以计算固定行高的行数：如何使用jQuery 检查行数

从这个开始：

<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位置计算出每条线的起点/终点。

相关文章：