我可以在跨度中包装多行文本的每一行吗? [英] Can I wrap each line of multi-line text in a span?

问题描述

我一直试图弄清楚该怎么做(如果可能的话)，并画了一个空白...

I've been trying to figure out how to do this (if it's even possible) and have drawn a blank...

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

I have some text that will wrap onto multiple lines. I want to detect each individual line, and wrap it in a span. Finally, I want to assign a class to each span from a looping array.

例如...！

<div id="quote">
    I have some text that
    wraps onto three lines
    in this container
</div>

我想让我的jQuery解析这些行，检测其换行，然后将其转换为:

I want to get my jQuery to parse those lines, detect where it wraps, and turn it into this:

<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中会换成四行.

The reason that I want to do this dynamically is that I'm doing it within responsive templates, so sometimes the same text will only wrap onto two lines, or maybe four in an iPhone.

这可行吗?我找到了-> http://vidasp.net/tinydemos/numberOfLines.html 它可以计算文本块中使用的行数，但这并不能真正满足我的需要.

Is this doable? I've found this -> http://vidasp.net/tinydemos/numberOfLines.html which calculates the number of lines used in a block of text, but that doesn't really extend to do what I need.

推荐答案

似乎您在问如何在浏览器自然包裹的地方拆分文本.不幸的是，这根本不是一件容易的事.它也不健壮—请考虑以下情形:

It seems like you're asking how to split the text where it is naturally wrapped by the browser. Unfortunately, this isn't straightforward at all. Neither is it robust — consider the following scenario:

• 用户浏览到您的页面，呈现div并触发onload事件，
• 从文本节点创建3个span元素，每个包裹的文本行1个，
• 用户调整浏览器的大小，并且div的大小更改.

结果是跨度不再与行的起点和终点相关.当然，使用固定宽度的元素可以避免这种情况，或者您可以在调整浏览器大小时重新调整整个内容，但这只是它如何破坏的一个示例.

The result is that the spans no longer correlate to where the lines start and finish. Of course, this scenario is avoidable using fixed-width elements or you can rejig the whole thing when the browser resizes, but that's just an example of how it can break.

还是，这并不容易.一个类似的问题出现过(尽管有不同的目标)，并且出现了两个解决方案，这可能对这里有帮助:

Still, it's not easy. A similar question has come up before (albeit, with a different goal) and two solutions appeared, which could both be of help here:

实际上并没有将文本换成跨距，而是使用getClientRects()获取每行文本的位置和尺寸.然后，创建必要的跨度数，并在每行文本后定位/调整其大小.

Don't actually wrap the text in spans, but get the position and dimensions of each line of text using getClientRects(). Then, create the number of spans necessary and position/resize them behind each line of text.

专业人士

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

缺点

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

提供的演示及其答案显示了如何突出显示鼠标下方当前的文本行

The demo provided with the answer shows how you can highlight the line of text currently beneath the mouse.

使用 split()方法将文本分割为数组，并以单词边界或空格作为参数传递.在每个元素之间使用</span><span>将数组重新连接为字符串，并用<span>和</span>包装整个内容，然后将原始文本节点替换为包含元素中的结果HTML.现在，遍历每个span元素，检查其在容器中的 y 位置.当 y 位置增加时，您知道到达了新行，并且之前的元素可以合并为一个跨度.

Split the text into an array using the split() method with a word boundary or white-space as the argument passed. Rejoin the array into a string with </span><span> between each element and wrap the whole thing with <span> and </span>, and replace the original text node with the resulting HTML in the containing element. Now, iterate over each of those span elements checking its y position within the container. When the y position increases, you know that you've reached a new line and the previous elements can be merged into a single span.

专业人士

• 每行都可以使用任何CSS属性设置样式，例如font-weight或text-decoration.
• 每行可以有自己的事件处理程序.

缺点

• 由于大量的DOM和字符串操作而缓慢而笨拙

也许还有其他方法可以实现您的目标，但是我不确定自己.当传递要分割的字符的数字索引时，TextNode.splitText(n)可以用twain(！)分割TextNode.以上两种解决方案都不是完美的，并且一旦包含元素调整大小，它们都将失效.

There may be other ways to achieve your goal, but I'm not sure of any myself. TextNode.splitText(n) can split a TextNode in twain (!) when passed a numeric index of the character you want to split on. Neither of the above solutions are perfect, and both break as soon as the containing element resizes.

这篇关于我可以在跨度中包装多行文本的每一行吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！