我有一些文本将包装在多行.我想检测每个单独的行,并将其包装在一个跨度.最后,我想从循环数组中为每个跨度分配一个类.
例如…！
<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以前出现(尽管有不同的目标),出现了两个解决方案,这两个解决方案可以在这里得到帮助：
实际上不要将文本包含在跨度中,而是使用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.上述解决方案都不是完美的,并且只要包含元素调整大小,都会中断.
