如何在每种情况下仅使用 CSS 将首字母大写
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17450351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Capitalize first letter only using CSS in each case
提问by Kabir
I want to Capitalize first letter only and other should be smallusing 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，因为在我的应用程序中，它在硬编码的每个地方都编写了代码，但在任何地方都调用了一个类。”
回答by mzmm56
you should be able to use the :first-letterpseudo 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
更好的东西
回答by zurfyx
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 string to title case 中提取
回答by Naftali aka Neal
You can try a combination of this answerand some javascript (using jQuery)
您可以尝试结合使用此答案和一些 javascript（使用 jQuery）
HTML:
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:
CSS：
.capitalize {
text-transform: lowercase;
}
.capitalize span {
display: inline-block;
padding-right: 1em
}
.capitalize span:first-letter {
text-transform: uppercase !important;
}
回答by Abibi8
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;*
}
回答by Ravi Joon
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'></span>")
}
}
.first-letter {
color: red;
}
<p class="each-word">First letter of every word is now red!</p>
