CSS で各段落の最初の単語のみをスタイルするにはどうすればよいですか?

正確なテキスト スタイルの実現: CSS の最初の単語をターゲットにする

「#content」内の各段落の最初の単語を強化しようとします。 " div に、14pt の明確なフォント サイズを与えます。 CSS だけでこれを実現できる可能性を探ってみましょう。

CSS の制限

残念ながら、CSS には最初の単語を選択するために特別に調整された組み込みの疑似要素がありません。この目的で「:first-letter」または「:first-line」を利用しようとしても、望ましい結果は得られません。

代替アプローチ: JavaScript

CSS の制限、JavaScript が解決策を提供します。回答で提供されているようなコード スニペットの利用を検討してください:

<script>
var elements = document.querySelectorAll("#content p");
for (var i = 0; i < elements.length; i++) {
var firstWord = elements[i].textContent.split(" ")[0];
elements[i].innerHTML = elements[i].innerHTML.replace(firstWord, "<span>

実装

1. この JavaScript コードを HTML ドキュメント内に含めるか、それを含む外部 JavaScript ファイル。
2. 特定の内容に一致するようにコード内の「#content」セレクターを調整します。 div の ID またはクラス。

結論

CSS には最初の単語のスタイルを直接サポートしていませんが、JavaScript は実行可能な代替手段を提供します。その機能を活用すると、指定した div 内の各段落の最初の単語を含む正確なテキスト スタイルを実現できます。

以上がCSS で各段落の最初の単語のみをスタイルするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。