如何為 `: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中文網其他相關文章！