首先将文本小写然后大写。 CSS可以吗？答案

【问题标题】：First lowercase the text then capitalize it. Is it possible with CSS?首先将文本小写然后大写。 CSS可以吗？
【发布时间】：2011-07-13 21:28:04
【问题描述】：

首先将文本小写然后大写。 CSS可以吗？

编辑：示例： HELLO WORLD -> Hello World

Edit2：我有一个全部大写的国家/地区列表，例如UNITED KINGDOM，我必须让它看起来像United Kingdom。

【问题讨论】：

你的意思是让它像这个评论一样吗？

标签： css

【解决方案1】：

是的：

.className {
    text-transform:capitalize;
}

Javascript：

function capitalize(s){
    return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
};

capitalize('this IS THE wOrst string eVeR');

从这里偷来的： Capitalize words in string

【讨论】：

"这是一些随机文本！"变成“这是一些随机文本！”......我相信他希望它变成“这是一些随机文本！”如果我没记错的话。

【解决方案2】：

我无权发表评论，所以我会写下我的经验作为答案。

我遇到了重读字符的问题，解决了在正则表达式的开头放置“^”并迭代文本的每个单词。

'^' 表示只匹配单词的第一个字符。

function captalize(s) {
    return s.toLowerCase().replace( /^\b./g, function(a){ return a.toUpperCase(); } );
}

var words = exampleText.split(" ");

jQuery.each(words, function(index, value) {
       var w = capitalize(value);
       exampleText.append(w).append(" ");
});

【讨论】：

【解决方案3】：

如果元素内的文本只有一行，则可以使用::first-line 伪元素：

<h3>HELLO WORLD</h3>
<style>
    h3 {
        text-transform: lowercase;
    }

    h3::first-line {
        text-transform: capitalize;
    }
</style>

【讨论】：