JavaScript 如何精确地设置段落中特定文本行的样式，克服 CSS 限制？

使用 CSS 和 JS 选择特定的文本行

设置特定文本行的样式可能具有挑战性，特别是当 CSS 伪元素如下时：第一行仅限于第一行。本文探讨了一种解决此限制的 JavaScript 解决方案。

此解决方案的一个用例是突出显示段落的每个偶数行以增强可读性。通过使用唯一的类将每一行包装在跨度中来预先格式化文本，从而可以实现有针对性的样式。然而，确定在何处分割文本可能很复杂，尤其是在段落宽度可变的情况下。

JavaScript 为这一挑战提供了实用的解决方案。提供的代码将每个单词包装在一个 span 元素中，并根据窗口大小调整期间的 span 位置分配一个类。当跨度的垂直位置发生变化时，行数会增加，并将相应的类（“行”后跟行号）分配给该跨度。

使用这种方法，偶数/奇数行辨别变得简单任务。为了提高效率，可以进一步优化代码。但是，提供的实现可作为概念的基础证明。

应考虑边缘情况，例如类样式改变字大小或宽度，因为这些可能会导致不准确的行分割。

此解决方案的工作演示可在 https://jsbin.com/piwizateni/1/edit?html,css,js,output 上找到，展示了偶数行的选择性突出显示段落。

以上是JavaScript 如何精确地设置段落中特定文本行的样式，克服 CSS 限制？的详细内容。更多信息请关注PHP中文网其他相关文章！