有没有办法使用 Javascript 或 CSS 来确定客户端浏览器中哪些单词在哪一行？答案

【问题标题】：Is there any way to determine, with Javascript, or CSS which words are on what line in the client's browser?有没有办法使用 Javascript 或 CSS 来确定客户端浏览器中哪些单词在哪一行？
【发布时间】：2011-06-12 02:46:29
【问题描述】：

假设我有这个 HTML：

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

我想确定客户端浏览器中短语sed do eiusmod tempor 所在的行，并从那里确定该行的开始和结束位置。有没有办法用javascript做到这一点。

然后我试图用那条线做的是沿着底部和侧面放置一个边框（因此该文本每一侧的边框平行于 <div> 所在区域的两侧英寸）。

我知道如果有解决方案这并不容易，但即使相对困难我也愿意。另外，如果 jQuery 有这样做的方法，我正在使用它。

另外，如果有办法使用 CSS，我会更高兴。

这里大致说一下，突出显示的部分是我要查找的文本，红线应该代表设置了边框的内容。

【问题讨论】：

那么您想定位文本sed do eiusmod tempor 的第一个实例并为其添加边框吗？如果是这样，您可以将该文本包装在 <span class="borderHere" /> 中并使用 CSS 做边框。如果不是，那么我不明白你的问题。图形表示会很有帮助:)
@Inrbob，是的，我确实想定位文本的第一个实例，但我想弄清楚该文本在哪一行并为该行添加边框。抱歉，我将尝试获得图形表示，我只是没有它工作，所以不知道如何获得它。文本不是固定文本，有时它会寻找其他部分并获取这些文本及其行。我正在寻找一种适用于任何窗口大小的解决方案。
好的 - 如果某行有文本，您想为整行添加边框吗？如果文本在多行上会发生什么？
我不确定在这种情况下行号是什么意思。
@inrbob，好的，我想我刚刚在这里找到了解决方案：stackoverflow.com/questions/1966441/…，无论如何，谢谢。

标签： javascript jquery html css line

【解决方案1】：

如果您将所需的单词包装在一个跨度中，那么您可以使用 CSS 应用样式。

Here's a CSS only solution，使用::before 和::after 伪元素。哈！

但不适用于超过两行的文本...

编辑：

This one 可以！虽然在大多数情况下，前一个会表现得更好。

【讨论】：

+1 以获得聪明的答案！两者都适用于我（Chrome）的多行。然而，这不是唯一的 CSS 解决方案，因为您需要以某种方式将文本包装在跨度中。
是的，但我认为如果没有<span> 的帮助，就无法使用 CSS 选择一段文本。 HTML5 <mark> element 在这里可能更合适。

【解决方案2】：

无法确定单个单词在元素中的位置。

但是，您可以将sed do eiusmod tempor 放置在具有唯一id 的<span> 元素中，然后您可以检索该元素并查询其位置。

【讨论】：