javascript - 有什么方法可以使用 Javascript 或 CSS 确定客户端浏览器中的哪一行中的哪些词？

Question

假设我有这个 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 的方法，我会更高兴。

这里大概讲一下，高亮的部分是我要找的文字，红线应该是有边框的。

Answer 1

如果将所需的单词包装在 span 中，则可以使用 CSS 应用样式。

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

但不适用于跨越两行以上的文本...

编辑:

This one确实如此!尽管在大多数情况下前一个会表现得更好。