すべて大文字の単語に影響を与えずに「text-transform: Capitalize」を使用するにはどうすればよいですか?

CSS text-transform のオーバーライド: すべての大文字のテキストを大文字にする

問題:

CSS の text-transform の使用: Capitalize ;すべて大文字のテキストを文に変換するルールは、固有名詞や頭字語など、単語の頭文字が本質的に大文字を必要とする場合に問題になります。

次のコード スニペットに示されているように、「Small」の目的の出力は、大文字とすべて大文字」ではありません達成:

HTML:

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

CSS:

.link {text-transform: capitalize;}

結果:

Small Caps & ALL CAPS

解決策:

へtext-transform:capitalize; を維持しながら、望ましい大文字化動作を実現します。ルールに従うと、次の CSS を実装できます:

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

この変更により、最初はすべてのテキストが小文字に変換され、その後、各単語の最初の文字とテキストの最初の行が再び大文字になります。

結果:

Small Caps
All Caps

以上がすべて大文字の単語に影響を与えずに「text-transform: Capitalize」を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。