`:first-line` 疑似要素を超えてテキストの特定の行のスタイルを設定するにはどうすればよいですか?

行の選択とスタイリング: CSS と JS を使用した最初の行を超えて

スタイル設定のためにテキストの特定の行を選択することは、 CSS 疑似要素 :first-line の制限事項。 CSS だけでは十分ではないかもしれませんが、JavaScript は実行可能なソリューションを提供します。

JavaScript のアプローチ

JavaScript を使用すると、各単語をspan要素で囲み、動的にspan要素を割り当てることができます。段落内の位置に基づいてクラスを決定します。このアプローチ:

1. 段落テキストを個々の単語に分割します。
2. 各単語をspan要素でラップし、段落に追加し直します。
3. ウィンドウをリッスンします。サイズ変更イベント。
4. スパンを反復処理し、オフセットに基づいて位置 (行番号) を決定します。 top.
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 中国語 Web サイトの他の関連記事を参照してください。