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

I want to Capitalize first letter only and other should be small using CSS

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

String is:

字符串是：

SOMETHING BETTER 
sOMETHING bETTER
Something better

but the result should be

但结果应该是

Something Better

Is this possible using CSS? To Capitalize first letter I am using

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

text-transform: capitalize;

But not able to capitalize in each case. "I want to use CSS because in my application it has written every where hard coded but a class has been called everywhere."

但在每种情况下都无法利用资本。 “我想使用CSS，因为在我的应用程序中，它已经编写了所有硬编码的地方，但是在任何地方都有一个类。”

5 个解决方案

#1

you should be able to use the :first-letter pseudo element:

你应该能够使用：first-letter伪元素：

.fl {
 display: inline-block;
}

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

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

yields:

收益率：

Something Better

更好的东西

#2

It is not possible with CSS alone but you can do it with Javascript or PHP for example.

单独使用CSS是不可能的，但您可以使用Javascript或PHP来实现。

In PHP

在PHP中

ucwords()

And in Javascript

并在Javascript中

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

Extracted from Convert string to title case with JavaScript

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

#3

You can try a combination of this answer and some javascript (using jQuery)

你可以试试这个答案和一些javascript的组合（使用jQuery）

HTML:

HTML：

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

JAVASCRIPT:

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:

CSS：

.capitalize {
    text-transform: lowercase;
}

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

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

Demo: http://jsfiddle.net/maniator/ZHhqj/

演示：http：//jsfiddle.net/maniator/ZHhqj/

#4

Why dont you just use the :first-letter pseudo element in css?

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

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

}

h2{

*your general code for h2 goes here;*

}

#5

Yes, CSS is no help here. Welcome to the world of JavaScript, where anything is possible.

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

#1