如何使用 CSS 将文本从小写转换为大写？

CSS 文本转换：小写到大写

您可以使用 CSS 调整文本以将其从小写转换为大写吗？

了解需求

考虑一个场景，您希望按以下方式设置文本格式：

• 先小写，然后仅大写每个单词的第一个字母.
• 输入：HELLO WORLD
• 输出：Hello World

另一个示例可能是全部大写的国家/地区列表，例如：UNITED KINGDOM，您可以选择需要转换为：英国。

CSS 实现

是的，CSS 提供了 text-transform 属性来实现此目的。通过将其设置为“大写”，您可以将每个单词的第一个字母大写，同时将其余字符转换为小写。

<code class="css">.className {
    text-transform: capitalize;
}</code>

此 CSS 规则适用于类名为 className 的元素，相应地转换其文本.

Javascript解决方案

除了CSS之外，还可以利用JavaScript来实现文本转换：

<code class="javascript">function capitalize(s) {
    return s.toLowerCase().replace(/\b./g, function (a) {
        return a.toUpperCase();
    });
}

console.log(capitalize('this IS THE wOrst string eVeR')); // "This Is The Worst String Ever"</code>

此函数将字符串s作为输入，将其转换为小写，然后使用正则表达式来识别单词边界 (b) 并将每个识别单词的第一个字符大写。

注意： 感谢 JavaScript 函数到以下资源：将字符串中的单词大写。

以上是如何使用 CSS 将文本从小写转换为大写？的详细内容。更多信息请关注PHP中文网其他相关文章！