ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSでテキストを小文字にした後、大文字にすることはできますか?

CSSでテキストを小文字にした後、大文字にすることはできますか?

Linda Hamilton
リリース: 2024-10-31 09:08:01
オリジナル
352 人が閲覧しました

Can You Capitalize Text After Lowercasing It with CSS?

CSS で小文字にした後にテキストを大文字にする

質問: 最初にテキストを小文字にしてから、次を使用して大文字にすることは可能ですか? CSS?

例:

  • HELLO WORLD → Hello World

追加コンテキスト:大文字の国リスト (例: UNITED KINGDOM) を小文字に変換する必要があります (例: United Kingdom)。

答え:

はい、CSS は次のように提供します。このタスクの解決策:

<code class="css">.className {
  text-transform: capitalize;
}</code>
ログイン後にコピー

この CSS は、text-transform: Capitalize プロパティをクラス className の要素に適用し、すべての小文字を大文字に、各単語の最初の文字を小文字に自動的に変換します。

JavaScript を使用した代替ソリューション:

CSS がオプションでない場合は、JavaScript を使用して同じ結果を達成できます:

<code class="javascript">function capitalize(s) {
  return s.toLowerCase().replace(/\b./g, function (a) {
    return a.toUpperCase();
  });
}

capitalize('this IS THE wOrst string eVeR');</code>
ログイン後にコピー

Capitalize 関数は文字列 s を入力として受け取り、toLowerCase() を使用して小文字に変換し、正規表現を含む replace メソッドを使用してすべての単語の境界 (b) を同等の大文字に置き換えます。これにより、各単語の最初の文字が効果的に大文字になり、残りの文字が小文字になります。

以上がCSSでテキストを小文字にした後、大文字にすることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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