CSS と JavaScript でテキストの特定の行をターゲットにしてスタイルを設定するにはどうすればよいですか?

CSS/JS でテキストの個々の行をターゲットにしてスタイル設定する方法

テキストの特定の行を選択してスタイル設定することは、CSS の :first-line 擬似要素を使用すると簡単に見えるかもしれません。しかし、テキスト内の任意の行をターゲットにする必要がある場合はどうすればよいでしょうか?

純粋な CSS では、次の方法が提供されていません。任意の行を選択すると、JavaScript でそのギャップを埋めることができます。

JavaScript の解決策

JavaScript を使用する 1 つのアプローチは、各単語を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 クラスを使用してスパンでラップし、ブラウザ ウィンドウのサイズが変更されるときにスパンの行位置に基づいてクラス名を割り当てます。

アプリケーション

段落のすべての偶数行を強調表示するには、 code:

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

注意事項

単語のサイズや幅に影響を与えるクラス名の変更などの特殊なケースは、スクリプトの精度に影響を与える可能性があることに注意することが重要です。

以上がCSS と JavaScript でテキストの特定の行をターゲットにしてスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。