CSSを使用して大文字をタイトルケースに変換する方法

Question

これを読んでいるなら、おそらくCSSプロパティtext-transform:capitalize;はこれをThisに変換していないことに気づいたでしょう。そうではなく、最初の文字は大文字で残っているので、変換はこの場合には何の効果もありません。だから私たちはこの結果をどのように達成できますか？

これはよく聞かれましたが、ほとんどの回答は、これを達成するためにjavascriptを使用して促進するのが簡単です。これは動作しますが、Wordpress、Drupal、JoomlaのようなPHP CMSのテンプレート/テーマを作成したり、カスタマイズしたりするのは不必要です。

Answer 1

text-transform : title-caseのようなものがないことが悪いニュースであり、結果がタイトルになることが保証されます。良いニュースは、javascriptを必要としない、これを行う方法があることです（この状況ではしばしば示唆されるように）。 CMSのテーマを書く場合は、strtolower（）とucwords()を使用して、関連するテキストをタイトルケースに変換できます。 BEFORE

（これが動作しない）：

<style> 
.title-case{ text-transform:capitalize; } 
</style> 
<span class="title-case">ORIGINAL TEXT</span> 

AFTER：あなたがテーマを作成している場合

<?php echo ucwords(strtolower('ORIGINAL TEXT')); ?> 

、あなたはおそらく、代わりにテキスト文字列の変数を扱うことになりますが、機能とコンセプトは同じように機能します。ここでは変数としてページのタイトルを返すために、ネイティブWordpressの機能get_the_title()を使った例です：

<?php 
$title = get_the_title(); 
$title = strtolower($title); 
$title = ucwords($title); 
<h1> 
<?php echo $title; 
</h1> 
?> 

・ホープこれは誰かに役立ちます。ハッピーコーディング。あなたは疑似クラス::最初の文字を使用して、CSSでこれを達成することができますし、すべての動作するはずある程度まで

text-transform: capitalize; 

Answer 2

あなただけtext-transform: none;

Answer 3

これは1つの単純なルールで達成することができますを書きますあなたのHTML構造に非常に依存していて、すべての場合にはうまくいかないかもしれませんが、時には役立つことがあります。「run code snippet」を参照してください結果は以下のとおりです。

ここで

.progTitle { 
 
    text-transform: lowercase; 
 
} 
 

 
.progTitle::first-letter { 
 
    text-transform: uppercase; 
 
}

<p class="progTitle">THIS IS SOME TEST TEXT IN UPPERCASE THAT WILL WORK. </p> 
 
<p class="progTitle">this is some test text in lowercase that will work. </p> 
 
<p class="progTitle"><i class="fa fa-bars"></i> THIS WILL NOT WORK </p>

Answer 4

：

Answer 5

Virtuemart 1.目的はもともと大文字の文字列を取り、適切なケースに変換することですが実行しているJoomlaの1.5.22のウェブサイトで実施例です。

大文字：

<?php echo $list[$i]->name; ?> 

適切ケース：

<?php echo ucwords(strtolower($list[$i]->name)); ?>