web-dev-qa-db-ja.com

各ケースでCSSのみを使用して最初の文字を大文字にする方法

最初の文字のみを大文字にし、CSSを使用してその他は小さくする

文字列は次のとおりです。

SOMETHING BETTER 
sOMETHING bETTER
Something better

しかし、結果は

Something Better

これはCSSを使用して可能ですか？使用している最初の文字を大文字にするには

text-transform: capitalize;

しかし、それぞれの場合に大文字を使用することはできません。 「CSSを使用したいのは、アプリケーション内でハードコーディングされたすべての場所を記述しましたが、クラスはどこでも呼び出されたからです。」

csswordcapitalization
15
Kabir

:first-letter疑似要素を使用できるはずです：

.fl {
 display: inline-block;
}

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

<p>
 <span class="fl">something</span> <span class="fl">better</span>
</p>

収量：

より良いなにか

36
mzmm56

CSSだけでは不可能ですが、JavascriptまたはPHPなどを使用してできます。

In[〜＃〜] php [〜＃〜]

ucwords()

そして、Javascript

function toTitleCase(str){
    return str.replace(/\w\S*/g, function(txt){
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}

JavaScriptで文字列をタイトルケースに変換する から抽出

7
zurfyx

この回答 といくつかのjavascript（jQueryを使用）の組み合わせを試すことができます

HTML：

<div class='capitalize'>
    SOMETHING BETTER 
    SOMETHING BETTER 
    SOMETHING BETTER 
</div>

JAVASCRIPT：

$('.capitalize').each(function(){
    var text = this.innerText;
    var words = text.split(" ");
    var spans = [];
    var _this = $(this);
    this.innerHTML = "";
    words.forEach(function(Word, index){
        _this.append($('<span>', {text: Word}));
    });
});

CSS：

.capitalize {
    text-transform: lowercase;
}

.capitalize span {
    display: inline-block;
    padding-right: 1em  
}

.capitalize span:first-letter {
    text-transform: uppercase !important;
}

デモ： http://jsfiddle.net/maniator/ZHhqj/

6
Neal

Cssで：first-letter擬似要素を使用しないのはなぜですか？

h2:first-letter{
text-transform: uppercase;

}

h2{

*your general code for h2 goes here;*

}
2
Abibi8

はい、CSSはここでは役に立ちません。あらゆることが可能なJavaScriptの世界へようこそ。

window.onload = function(){
  var elements = document.getElementsByClassName("each-Word")
  for (var i=0; i<elements.length; i++){
    elements[i].innerHTML = elements[i].innerHTML.replace(/\\b([a-z])([a-z]+)?\\b/gim, "<span class='first-letter'>$1</span>$2")
  }
}



  .first-letter {
    color: red;
  }



<p class="each-Word">First letter of every Word is now red!</p>
0
Ravi Joon