JavaScript は CSS の制限を克服して、段落内のテキストの特定の行を正確にスタイル設定するにはどうすればよいでしょうか?

CSS と JS を使用したテキストの特定の行の選択

テキストの特定の行のスタイル設定は、特に次のような CSS 疑似要素の場合に困難になることがあります。 first-line は最初の行に限定されます。この記事では、この制限に対処する JavaScript ソリューションについて説明します。

このソリューションの 1 つの使用例は、読みやすさを向上させるために段落のすべての偶数行を強調表示することです。独自のクラスを使用してスパン内の各行をラップすることでテキストを事前にフォーマットすると、目的を絞ったスタイル設定が可能になります。ただし、テキストをどこで分割するかを決定することは、特に段落幅が可変の場合、複雑になる可能性があります。

JavaScript は、この課題に対する実用的な解決策を提供します。提供されたコードは、各単語をspan要素でラップし、ウィンドウのサイズ変更中にスパンの位置に基づいてクラスを割り当てます。スパンの垂直位置が変化すると行数が増加し、対応するクラス (「行」の後に行番号が続く) がスパンに割り当てられます。

このアプローチを使用すると、偶数/奇数行の区別が簡単になります。タスク。効率を向上させるために、コードをさらに最適化することができます。ただし、提供された実装は、概念の基礎的な証明として機能します。

クラス スタイルによって単語のサイズや幅が変更される場合など、不正確な行分割につながる可能性がある場合など、エッジ ケースを考慮する必要があります。

このソリューションの動作デモは https://jsbin.com/piwizateni/1/edit?html,css,js,output で利用できます。段落の偶数行目。

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