既存のすべての大文字を維持したまま、CSS で各単語の最初の文字だけを大文字にするにはどうすればよいですか?

CSS text-transform: すべて大文字にするジレンマ

CSS の text-transform プロパティは、テキストの大文字化を制御します。 「capitalize」に設定すると、各単語の最初の文字が大文字になります。ただし、すでにすべて大文字で表記されている単語を扱う場合、問題が発生します。

問題

提供された HTML および CSS スニペット内:

<a href="#" class="link">small caps</a> & 
<a href="#" class="link">ALL CAPS</a>

.link {
  text-transform: capitalize;
}

出力は「Small Caps & ALL CAPS」ですが、目的の出力は「Small Caps & All Caps」です。

解決策

望ましい結果を達成するには、CSS ルールの組み合わせを使用できます。

.link {
  text-transform: lowercase;
}

.link:first-letter,
.link:first-line {
  text-transform: uppercase;
}

• text-transform: lowercase ルールは、「.link」要素内のすべてのテキストを小文字に変換します。
• 疑似要素 :first-letter および :first-line に適用される te​​xt-transform: uppercase ルールは、それぞれ各要素の最初の文字と最初の行を大文字にします。

このアプローチにより、次のことが保証されます。すでにすべて大文字で表記されている単語 (「ALL CAPS」など) は、他の単語の最初の文字を大文字にしたまま保持されます。結果の出力は次のようになります:

Small Caps 
All Caps

以上が既存のすべての大文字を維持したまま、CSS で各単語の最初の文字だけを大文字にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。