Css

なぜCssテキスト変換キャピタライズが機能しないのですか？



Why Css Text Transform Capitalize Not Working



解決：

大文字は単語の最初の文字にのみ影響します。単語内の残りの文字の大文字と小文字は変わりません。たとえば、すでにすべて大文字になっている単語を大文字にすると、その単語の他の文字は小文字に切り替わりません。これは、テキストに小文字を含めるべきではない頭字語または略語が含まれている場合に便利です。

提供されたテキストを小文字に変更すると、問題なく機能することがわかります。



しかし、完全に答えるために、私は入力に関係なく、希望する方法で活用する方法を見つけようとします。

すべての単語を別の要素でラップしていない場合、単一の単語のテキスト以外の何かについては、CSSだけでは不可能のようです。



一言スニペット

span、a、h2 {text-transform：lowercase} span：first-letter、a：first-letter、h2：first-letter {text-transform：capitalize; } 
CSStext-transform：capitalizeは最初の文字にのみ影響します。
 
仕様によると：
 
 
  
 
Capitalize各単語の最初の文字を大文字にします。他の文字は影響を受けません。
 
 
コンテンツを編集することを強くお勧めします。結局のところ、次のようなテクノロジーはcssは、問題を解決する1つの方法にすぎません。繰り返しになりますが、より良い解決策は、データベースに保存されているか、マークアップの静的コンテンツであるかにかかわらず、そのコンテンツを編集して大文字にすることです。
 
 
ハックとして（本当にコードレベルのソリューションを使用したい場合）、次を使用できます最初にすべての文字を小文字に変換するJavaScript。次に、/  b（ w）/ gを使用して最初の文字のインスタンスを照合し、次にそれぞれのtoUpperCase（）
 
document.querySelector（ 'a'）。innerText = document.querySelector（ 'a'）。innerText.toLowerCase（）。replace（/  b（ w）/ g、x => x.toUpperCase（））;
  これは、HREFのテキストの例です。  
  
 
span、a、h2 {text-transform：小文字！important; } span：first-letter、a：first-letter、h2：first-letter {text-transform：capitalize！important; }
 これはテキストの例です 
  これは、HREFのテキストの例です。