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

s3fp2yjn  于 2023-04-23  发布在  其他
关注(0)|答案(5)|浏览(164)

我想大写的第一个字母只和其他应该是小使用CSS
字符串为:

SOMETHING BETTER 
sOMETHING bETTER
Something better

但结果应该是

Something Better

这是可能的使用CSS?要大写的第一个字母,我使用

text-transform: capitalize;

我想使用CSS,因为在我的应用程序中,它已经写了硬编码的每一个地方,但一个类已经被到处调用。

vdgimpew

vdgimpew1#

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

.fl {
 display: inline-block;
}

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

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

产量:
更好的东西

pu82cl6c

pu82cl6c2#

单独使用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

svgewumm

svgewumm3#

您可以尝试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/

ffvjumwh

ffvjumwh4#

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

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

}

h2{

*your general code for h2 goes here;*

}
quhf5bfb

quhf5bfb5#

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

相关问题