如何为 `:first-line` 伪元素之外的特定文本行设置样式？

行选择和样式：使用 CSS 和 JS 超越第一行

选择特定的文本行进行样式设置是一项超出范围的任务CSS 伪元素 :first-line 的局限性。虽然仅 CSS 可能不够，但 JavaScript 提供了可行的解决方案。

JavaScript 方法

使用 JavaScript，可以将每个单词包装在一个 span 元素中并动态分配一个基于其在段落中的位置的类。这种方法：

1. 将段落文本拆分为单独的单词。
2. 将每个单词包装在 span 元素中并将其附加回段落。
3. 监听窗口调整事件大小。
4. 迭代跨度，根据偏移量确定它们的位置（行号）顶部。
5. 将线类分配给跨度（例如，line1、line2）以方便样式设置。

此方法通过将类应用于相应的跨度来实现线选择和样式化，从而简化突出显示每个偶数或奇数行的过程。

实现详细信息

$(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); 
  $(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(); //first one
});

边缘情况

此方法假设线类不会显着改变单词的大小或宽度，因为它可能会影响行编号的准确性。

以上是如何为 `:first-line` 伪元素之外的特定文本行设置样式？的详细内容。更多信息请关注PHP中文网其他相关文章！