如何在每种情况下仅使用 CSS 将首字母大写答案

【问题标题】：How to Capitalize first letter only using CSS in each case如何在每种情况下仅使用 CSS 将首字母大写
【发布时间】：2013-07-01 06:46:38
【问题描述】：

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

字符串是：

SOMETHING BETTER 
sOMETHING bETTER
Something better

但结果应该是

Something Better

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

text-transform: capitalize;

但不能在每种情况下都大写。 “我想使用 CSS，因为在我的应用程序中，它已经编写了所有硬编码的地方，但到处都调用了一个类。”

【问题讨论】：

单独使用 CSS 是不可能的。即使尝试将text-transform: lowercase 级联成text-transform: capitalize 也行不通。如果你想使用 javascript，这里有一个答案的链接：stackoverflow.com/questions/196972/…
在 PHP - ucwords("UPPERCASE WORD HERE"); 中，结果：Uppercase Word Here" - php.net/manual/en/function.ucwords.php 你不能只使用 CSS，因为你不能这样做 lowercase 然后 capitalize .
make the first character uppercase in css 的可能副本
@yoeriboven：我觉得不一样。

标签： css word capitalization

【解决方案1】：

你应该可以使用:first-letter伪元素：

.fl {
 display: inline-block;
}

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

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

产量：

更好的东西

【讨论】：

这是正确的，但意味着每个单词都需要用span 包裹，这很难看
添加了一些javascript magic ^_^ @mzmm56

【解决方案2】：

单独使用 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();});
}

提取自 Convert string to title case with JavaScript

【讨论】：

【解决方案3】：

你可以尝试this answer和一些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/

【讨论】：

【解决方案4】：

为什么不直接在 css 中使用 :first-letter 伪元素？

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

}

h2{

*your general code for h2 goes here;*

}

【讨论】：

【解决方案5】：

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

【讨论】：

错了，在 CSS 中完全可以。 Javascript 太过分了。