ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS ですべて大文字のテキストを保持したまま、単語の最初の文字だけを大文字にするにはどうすればよいですか?

CSS ですべて大文字のテキストを保持したまま、単語の最初の文字だけを大文字にするにはどうすればよいですか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-11-26 03:16:14418ブラウズ

How Can I Capitalize Only the First Letter of Words While Preserving All Caps Text in CSS?

CSS text-transform: Capitalize on All Caps

このシナリオでは、text-transform: Capitalize プロパティを上位または大文字の要素に適用します。小文字のテキストでは、小文字の単語に応じて大文字が使用されます。ただし、すべて大文字のテキストで問題が発生します。望ましい結果は大文字を維持することです。

この課題に対処するには、テキスト変換: 小文字とテキストの組み合わせを使用して CSS ソリューションを実装できます。 -transform: 大文字のプロパティと、:first-letter および :first-line の擬似クラス。

更新されたものは次のとおりです。 CSS:

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

この組み合わせは、最初の文字の大文字化を維持したまま、すべてのテキストを小文字に変換します。このスタイルを提供された HTML の a 要素に適用すると、次の目的の出力を実現できます。

Small Caps & All Caps

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。