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

Question

我想首先使用首字母大写,而其他应该使用CSS 小

字符串是:

SOMETHING BETTER 
sOMETHING bETTER
Something better

但结果应该是

Something Better

这可能使用CSS吗？资本化我正在使用的第一封信

text-transform: capitalize;

但在每种情况下都无法利用资本."我想使用CSS,因为在我的应用程序中,它已经编写了每个硬编码的地方,但是到处都有一个类."

Answer 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>

收益率:

更好的东西

Answer 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();});
}

使用JavaScript从Convert字符串提取 到标题大小写

Answer 3

你可以试试这个答案和一些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/