如何在每种情况下仅使用CSS大写第一个字母

我只想大写第一个字母，其他字母应该是小的使用CSS

字符串为：

SOMETHING BETTER 
sOMETHING bETTER
Something better

但结果应该是

Something Better

这是否可能使用CSS？将我使用的第一个字母大写

text-transform: capitalize;

但在每种情况下都无法资本化。

---

“我想使用CSS，因为在我的应用程序中，它在每个地方都编写了硬编码，但在每个地方都调用了一个类。”

仅使用CSS是不可能的，但您可以使用Javascript或PHP来实现它

在PHP中

ucwords()

在Javascript中

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

摘自

---

您应该能够使用

：第一个字母

伪元素：

.fl {
 display: inline-block;
}

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

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

.fl{
显示：内联块；
}
.fl:第一个字母{
文本转换：大写；
}

更好的

收益率：

---

更好的东西

您可以尝试结合使用Java和一些javascript（使用jQuery）

HTML:

---

演示：

为什么不在css中使用：first-letter伪元素呢

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

}

h2{

*your general code for h2 goes here;*

}

---

是的，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>

window.onload=function（）{
var elements=document.getElementsByClassName（“每个单词”）
for（var i=0；仅使用CSS是不可能的。即使尝试将
文本转换：小写
级联成
文本转换：大写
，也不会起作用。如果您想使用javascript，这里有一个链接，指向这个问题的答案：在PHP中-
ucwords（“此处大写词”）；
，结果是：
此处大写词“
-你不能只使用CSS，因为你不能先使用
小写
，然后再使用
大写
。@yoeriboven的可能重复：我认为不一样。这是正确的，但意味着每个单词都需要包装在
span
中，这很难看，添加了一些^^@mzmm56。”
.capitalize {
    text-transform: lowercase;
}

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

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

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

}

h2{

*your general code for h2 goes here;*

}

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>