jquery – 我可以在跨度中包装多行文本的每一行吗？

我一直在试图弄清楚如何做到这一点(如果它甚至可能),并绘制了一个空白…

我有一些文本将包装在多行.我想检测每个单独的行,并将其包装在一个跨度.最后,我想从循环数组中为每个跨度分配一个类.

例如…！

<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,它计算在一个文本块中使用的行数,但这并不真正扩展到我需要的.

如果任何jquery忍者可以帮助我会非常感激！

解决方法

看起来你正在问如何拆分浏览器自然包裹的文本.不幸的是,这并不简单.既不强壮 – 请考虑以下情况：

>用户浏览您的页面,div被渲染并且onload事件触发,
> 3个跨度元素是从文本节点创建的,每个包裹的文本行为1,
>用户调整浏览器大小并改变div的大小.

结果是跨度不再与线开始和结束的位置相关联.当然,使用固定宽度元素可以避免这种情况,或者当浏览器调整大小时,您可以重新整理所有内容,但这只是一个如何破坏它的一个例子.

不过,这并不容易. similar question以前出现(尽管有不同的目标),出现了两个解决方案,这两个解决方案可以在这里得到帮助：

Solution 1: getClientRects()

实际上不要将文本包含在跨度中,而是使用getClientRects()获取每行文本的位置和尺寸.然后,创建必要的跨度数量,并在每行文本后面放置/调整它们的大小.

优点

快速; getClientRects返回每行的位置
>简单代码比解决方案2更优雅

缺点

包装的文本必须由内联元素包含.
>没有样式实际适用于文本(如font-weight或font-color).仅适用于背景颜色或边框等.

The demo provided与答案显示如何突出显示当前在鼠标下方的文本行.

Solution 2: Split,join,loop,merge

使用具有字边界或白空格的split()方法将文本分割为数组,作为参数传递.将数组重新加入到带有< / span>< span>在每个元素之间并将整个事物与< span>和< / span>,并将原始文本节点替换为包含元素中的结果HTML.现在,遍历容器中检查其y位置的这些span元素中的每一个.当y位置增加时,您知道您已经达到新行,并且先前的元素可以合并到一个跨度.

优点

>每行都可以使用任何CSS属性,如font-weight或text-decoration.
>每行都可以有自己的事件处理程序.

缺点

>由于众多的DOM和字符串操作,缓慢而笨重

结论

可能还有其他方式来实现您的目标,但我不确定自己. TextNode.splitText(n)可以在传递要分割的字符的数字索引时,分割twain(！)中的TextNode.上述解决方案都不是完美的,并且只要包含元素调整大小,都会中断.