JavaScript と CSS を使用してテキストの特定の行を選択的にスタイル設定するにはどうすればよいですか?

CSS と JavaScript を使用した特定のテキスト行の選択とスタイル設定

問題:

テキスト行を選択的にターゲットにしてスタイル設定するにはどうすればよいですか?文書内の特定のテキスト行? :first-line CSS 疑似要素を使用すると、最初の行をターゲットにできますが、任意の行を選択する方法はありますか?

JavaScript 解決策:

以来 CSS単独ではこれを達成できないため、JavaScript ソリューションが必要です。次のアプローチを検討してください:

$(function() {
  var p = $('p');
  var words = p.text().split(' '), text = '', line = 0;
  $.each(words, function(i, w) {
    if ($.trim(w)) text += '<span>' + w + '</span> ';
  });
  p.html(text);
  $(window).resize(() => {
    var prevTop = -15;
    $('span', p).each(function() {
      var top = $(this).offset().top;
      if (top !== prevTop) { prevTop = top; line++; }
      $(this).attr('class', 'line' + line);
    });
  });
  $(window).resize();
});

説明:

この解決策は、各単語を動的にspan要素にラップし、その単語に基づいて各スパンにラインクラスを割り当てます。位置。ウィンドウのサイズが変更されると、スクリプトは各行が適切に識別されるように行クラスを調整します。

使用方法:

1. jQuery ライブラリを含めます。
2. 選択用の ID またはクラスを使用してテキストを段落要素で囲みます。
3. 追加提供されたスクリプトをページに追加します。
4. 各スパン要素に適用されているラインクラスを確認するには、ウィンドウのサイズを変更します。

追加メモ:

• 偶数行または奇数行のみを選択するなど、特定の行選択のロジックを調整します。
• 検討してください。ワード サイズまたは幅を変更するクラスに関する潜在的な問題。
• 実際の例については、提供されている JSBin デモを確認してください。

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