スパン要素を大文字にする方法

spanは、2つの要素の間にスペースを入れずに保持します。それぞれspanに含まれる最初の文字を大文字にしたいと思います。どうすればいい？スパン要素を大文字にする方法

この場合JSFiddle私はtext-transformルールを使用していますが、表示されているように動作しません。

これがあなたのためにトリックを行う必要がありhttps://jsfiddle.net/9s2f1mrj/2/

2017-01-05 09:12:09

これが受け入れられる回答である必要があります。 Praveenは当初、それが実際には間違っていたとしても、複数の人が答えを投票したCSSではできないことを示唆していました。 – seemly

@seemlyええ、ついにそれが可能であることがわかった。間違いは起きる。 –

もちろん、私は間違いが起きていることを認識しています。あなたの答えがCSSを使って行えないと答えたとき、あなたの答えは一般的に6人の信用投票としてマークされていました。これはあなたの批判ではなく、最初の "正しい"答えであり、あなたの答えを更新したものです。 – seemly

text-transformはスペースを検索します。スペース文字がないので、新しいタグに入っていても、最初の文字を大文字にすることはありません。その理由は、両方のタグを合わせたtextContentは2つの単語ではなく、1つのタグを提供しているからです。

.first, .second {display: inline-block;}

上記作品：inline-blockにspan設定ブラウザをだますための回避策として

は、2つの単語として考慮されるべきことをトリガします。

.first, .second { 
 
    text-transform: capitalize; 
 
    display: inline-block; 
 
}

<span class="first">first</span><span class="second">second</span>

2017-01-05 09:10:23

。それは真実ではない。表示の追加：インラインブロック;ハックではなく、回避策です。 – seemly

答えをありがとう、私はあなたの編集前にこれを最初に見たとき、私はそれがCSSで可能ではなかったとうんざりし、他の答えを見た。 –

@MichaelRader私は心からあなたに同意します... ...：D'しかし、あなたが良い説明をくれたという事実を否定することはできません。 '：D' –

をいじるためにdisplay: inline-block

.first, .second { 
    text-transform: capitalize; 
    display: inline-block; 
}

リンクを追加します。

.first, .second { 
    display: inline-block; 
    text-transform: capitalize; 
}

私はそれが助けてくれることを願っています！

2017-01-05 09:13:44 codePG

ここに擬似::first-letterを使用したもう1つの解決策があります。しかしながら

::first-letter擬似要素は、ブロック、インラインブロック、テーブルセル、リスト項目またはテーブル・キャプションの表示値を持つ要素に影響を与えます。それ以外の場合は、::first-letterは効果がありません。

だから私の提案は次のとおりです。それは最初に、それはCSSで行うことができないと述べているときに、この答えは6人のまでの票を得た

span { 
 
    display: inline-block; 
 
} 
 
span::first-letter { 
 
    text-transform: uppercase; 
 
}

<span class="first">first</span><span class="second">second</span>

2017-01-05 09:41:27 Banzay

答えて