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

Mary-Kate Olsen
リリース: 2024-11-26 03:16:14
オリジナル
336 人が閲覧しました

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート