我一直在试图弄清楚如何做到这一点（如果可能的话）并且画了一个空白......
我有一些文本将换行为多行。我想检测每一行，并将其包装在一个跨度中。最后，我想为循环数组中的每个范围分配一个类。
例如...！
<div id="quote">
I have some text that
wraps onto three lines
in this container
</div>
我想让我的 jQuery 解析这些行，检测它的换行位置，然后将其转换为：
<div id="quote">
<span class="red-bg">I have some text that</span>
<span class="orange-bg">wraps onto three lines</span>
<span class="yellow-bg">in this container</span>
</div>
我想要动态执行此操作的原因是我在响应式模板中执行此操作，因此有时相同的文本只会换行为两行，或者在 iPhone 中可能为四行。
这可行吗？我找到了这个->http://vidasp.net/tinydemos/numberOfLines.html http://vidasp.net/tinydemos/numberOfLines.html它计算文本块中使用的行数，但这并没有真正扩展到执行我需要的操作。
您似乎在问如何在浏览器自然包裹的地方分割文本。不幸的是，这根本就不简单。它也不健壮——考虑以下场景：
- 用户浏览到您的页面，div 被渲染并触发 onload 事件，
- 从文本节点创建 3 个 span 元素，每行换行文本 1 个，
- 用户调整浏览器大小并且 div 的大小发生变化。
结果是跨度不再与线条的起点和终点相关。当然，使用固定宽度元素可以避免这种情况，或者您可以在浏览器调整大小时重新调整整个元素，但这只是它如何破坏的一个示例。
尽管如此，这并不容易。 A类似的问题 https://stackoverflow.com/questions/2456442/how-can-i-highlight-the-line-of-text-that-is-closest-to-the-mouse之前已经出现过（尽管目标不同）并且出现了两种解决方案，这两种解决方案都可以在这里提供帮助：
解决方案1：getClientRects() https://stackoverflow.com/questions/2456442/how-can-i-highlight-the-line-of-text-that-is-closest-to-the-mouse/2456631#2456631
实际上并不将文本包裹在跨度中，而是使用以下命令获取每行文本的位置和尺寸getClientRects()。然后，创建所需的跨度数量，并将其放置在每行文本后面/调整其大小。
Pros
- 快速地; getClientRects 返回每行的位置
- 简单的;代码比方案2更优雅
Cons
- 换行文本必须包含在行内元素中。
- 任何样式实际上都不会应用于文本（例如字体粗细或字体颜色）。仅对背景颜色或边框等有用。
提供的演示 http://jsbin.com/avuku/15答案显示如何突出显示当前鼠标下方的文本行。
解决方案2：拆分、连接、循环、合并 https://stackoverflow.com/questions/2456442/how-can-i-highlight-the-line-of-text-that-is-closest-to-the-mouse/2456582#2456582
使用以下命令将文本拆分为数组split()以单词边界或空格作为参数传递的方法。将数组重新连接成字符串</span><span>在每个元素之间并将整个元素包裹起来<span> and </span>，并用包含元素中生成的 HTML 替换原始文本节点。现在，迭代每个 span 元素，检查其y容器内的位置。当。。。的时候y位置增加，您知道已经到达新行，并且之前的元素可以合并到单个跨度中。
Pros
- 每行都可以使用任何 CSS 属性进行样式设置，例如 font-weight 或 text-decoration。
- 每行都可以有自己的事件处理程序。
Cons
结论
可能还有其他方法可以实现您的目标，但我自己也不确定。TextNode.splitText(n)当传递要分割的字符的数字索引时，可以将 TextNode 分割为 twain (!)。上述两种解决方案都不是完美的，并且一旦包含元素调整大小，它们都会崩溃。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
