CSS を使用してテキストを小文字から大文字に変換するにはどうすればよいですか?

CSS テキストの変換: 小文字から大文字へ

CSS を使用してテキストを微調整して小文字から大文字に変換できますか?

ニーズを理解する

次の方法でテキストを書式設定するシナリオを考えてみましょう:

• 最初に小文字にし、各単語の最初の文字のみを大文字にします。 .
• 入力: HELLO WORLD
• 出力: Hello World

別の例は、次のようなすべて大文字の国リストです。変換する必要があります: イギリス。

CSS 実装

はい、CSS はこれを実現するために text-transform プロパティを提供します。 「大文字」に設定すると、各単語の最初の文字を大文字にし、残りの文字を小文字に変換できます。

<code class="css">.className {
    text-transform: capitalize;
}</code>

この CSS ルールはクラス名 className の要素に適用され、それに応じてテキストが変換されます。 .

JavaScript ソリューション

CSS のほかに、JavaScript を利用してテキスト変換を行うこともできます。

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

console.log(capitalize('this IS THE wOrst string eVeR')); // "This Is The Worst String Ever"</code>

この関数は文字列 s を次のように受け取ります。入力し、それを小文字に変換し、正規表現を使用して単語の境界を識別し (b)、識別された各単語の最初の文字を大文字にします。

注: JavaScript 関数の功績はあります。次のリソースに追加します: 文字列内の単語を大文字にします。

以上がCSS を使用してテキストを小文字から大文字に変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。