如何在 CSS 和 JavaScript 中定位和設定特定文字行的樣式？

如何在CSS/JS 中定位和樣式化單行文字

使用CSS 的:first-line 偽元素來選擇和樣式化特定的文字行可能看起來很簡單，但是如果您需要定位文字中的任何行怎麼辦？

雖然純 CSS 不提供選擇任意行的方法，但 JavaScript可以填補空白。

JavaScript 解決方案

使用 JavaScript 的一種方法是將每個單字包裝在 span 元素中，並根據 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); 
  $(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
});

此程式碼本質上將文字分解為單獨的單字，使用CSS 類別將它們包裝在Span 中，並在調整瀏覽器視窗大小時根據Span 的行位置分配類別名稱。

應用程式

要突出顯示段落的每個偶數行，您可以修改程式碼：

$('span.even, span.odd').css({
  'background-color' : '#ccc'
});

注意事項

需要注意的是，邊緣情況（例如影響字大小或寬度的類別名稱變更）可能會影響腳本的準確性。

以上是如何在 CSS 和 JavaScript 中定位和設定特定文字行的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！