JavaScript 如何像 CSS 的 `:first-line` 那样为任意行设置特定文本行的样式？

使用 JavaScript 选择特定文本行

我们如何设置特定文本行的样式，类似于 :first-line CSS 伪元素，而不将其限制为仅第一行？

虽然 CSS 不足以完成此任务，但 JavaScript 提供了

JavaScript 实现：

我们可以使用 JavaScript 将每个单词包装在一个 span 元素中：

$(function(){ 
  var p = $('p'); 
  var words = p.text().split(' '); 
  var text = ''; 
  $.each(words, function(i, w){
                   if($.trim(w)) text = text + '<span>' + w + '</span> ' }
        ); //each word 
  p.html(text); 

确定行号每个跨度，我们使用窗口的调整大小事件来计算每个跨度的垂直位置span:

  $(window).resize(function(){ 

    var line = 0; 
    var prevTop = -15; 
    $('span', p).each(function(){ 
      var word = $(this); 
      var top = word.offset().top; 
      if(top!=prevTop){ 
        prevTop=top; 
        line++; 
      } 
      word.attr('class', 'line' + line); 
    });//each 

  });//resize 

突出显示偶数/奇数行：

要突出显示偶数/奇数行，代码可以简化为：

  $(window).resize(function(){ 

    $('span', p).each(function(){ 
      var word = $(this); 
      var top = word.offset().top; 
      var line = Math.floor(top / 20);
      word.attr('class', (line % 2 == 0 ? 'even' : 'odd'));
    });//each
  });//resize 

注意事项：

这个方法假设单词不在同一行内换行，并且类中的更改可能会影响单词的大小或宽度。

示例：

[点击此处](https://jsbin.com/piwizateni/1/edit?html,css,js,output) 进行工作演示。

以上是JavaScript 如何像 CSS 的 `:first-line` 那样为任意行设置特定文本行的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！