CSSで最初の文字を大文字にする


255

CSSのラベルで最初の文字を大文字にする方法はありますか?

これが私のHTMLです:

<a class="m_title" href="">gorr</a>
<a class="m_title" href="">trro</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr</a>


2
指定するには-最初の文字と最初の文字のみ。text-transform: capitalize;複数の単語がある場合、これでは不十分です
wiktus239

回答:


622

そのためのプロパティがあります:

a.m_title {
    text-transform: capitalize;
}

リンクに複数の単語を含めることができ、最初の単語の最初の文字のみを大文字にしたい場合:first-letterは、代わりに別の変換を使用します(実際には問題ありません)。ためにそのノート:first-letterワークへのa要素は、ブロック(することができる容器であることが必要display: blockdisplay: inline-blockまたは一つ以上の特性の他の組み合わせの種々の任意):

a.m_title {
    display: block;
}

a.m_title:first-letter {
    text-transform: uppercase;
}

3
@alanjds:はい、CSSをサポートするIEのすべてのバージョンで動作します。それは非常に古い技術です。
BoltClock

3
ダブルセミコロンを使用することもできます。css
tricks.com/ almanac /

5
@Voles:IE8以前をサポートする必要がない場合は確認してください。必要に応じて、ダブルコロンを使用できないとは言わないでください。(2半年前に投稿されたこの回答の時点では、私の個人的なポリシー、デフォルトでIE8をサポートすることでした。現在、私はもうサポートしていません。)
BoltClock

1
場合は注意、display: block要件は(つまり、なぜ誰もが知っている)、この困難になり、:first-letterまたで動作しますdisplay: inline-block
Mitya 14

1
@Henry Garcia De Guzman:(各単語や文などの)最初の文字だけでなく、すべてを大文字にするため。
BoltClock

55

なお、::first-letterそれはどちらかでなければならないので、セレクタは、インライン要素としない作業を行うblockか、inline-block次の通り:

.m_title {display:inline-block}
.m_title:first-letter {text-transform: uppercase}

1
私の場合、テキスト全体がすでに大文字になっているので、text-transform:小文字を.m_titleに追加する必要がありましたが、完全に機能します!
hjuster 2018年


15

私は使用することをお勧めします

#selector {
    text-transform: capitalize;
}

または

#selector::first-letter {
    text-transform: uppercase;
}

ちなみに、このw3schoolsのリンクを確認してください:http : //www.w3schools.com/cssref/pr_text_text-transform.asp


2
良い答えですが、これは間違いなく w3cのドキュメントへのリンクではありません
ステファン

1
注:テキスト変換の「頭文字」は、「最初の文字を大文字にする」という意味ではありません。むしろ、「このプロパティの初期のデフォルト値に戻す」ことを意味します。
Marcos Buarque

おかげで、私は両方の推奨修正を適用しました。
Marcos Buarque 2018年

5

最初に小文字にしてください:

.m_title {text-transform: lowercase}

次に、最初の文字を大文字にします。

.m_title:first-letter {text-transform: uppercase}

「text-transform:capitalize」は単語に対して機能します。しかし、もしあなたが文章に使いたいなら、この解決策は完璧です。


2
:first-letterはinline要素では機能しませんdisplay:inline-block。これが該当する場合に設定します。(stackoverflow.com/questions/7631722/...
Fanky

1
<script type="text/javascript">
     $(document).ready(function() {
     var asdf = $('.capsf').text();

    $('.capsf').text(asdf.toLowerCase());
     });
     </script>
<div style="text-transform: capitalize;"  class="capsf">sd GJHGJ GJHgjh gh hghhjk ku</div>

私の仕事です。コンセプト..最初の文字の大文字で各単語に段落を付ける
Gnana Sekar 2017

-2

CSSで次のコードを使用することをお勧めします。

    text-transform:uppercase; 

必ずクラスに入れてください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.