CSS：文本转换 text-transform属性，字，字母大写转小写，小写转大写

最新推荐文章于 2024-05-10 18:21:11 发布

前端小云儿

最新推荐文章于 2024-05-10 18:21:11 发布

阅读量1.1k

点赞数

分类专栏： css 前端静态页面以及逻辑文章标签： css

本文链接：https://blog.csdn.net/jieweiwujie/article/details/126647028

版权

前端静态页面以及逻辑同时被 2 个专栏收录

148 篇文章 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

css

75 篇文章

订阅专栏

CSS的text-transform属性用于控制文本的大小写转换，例如将文本转为大写、小写或首字母大写。不同浏览器对单词处理方式可能存在差异，如Chrome将连续文本视为一个单词，Firefox则按空格拆分。capitalize值在Chrome中表现为'Text-Transform'，Firefox中则是'Text-transform'。由于CSS规范未明确指定处理方式，这两种显示均被视为正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

英文字母的大小写转换，是CSS提供的非常实用的功能之一，
文本的大小写转换在空格处理之后进行。文本转换对中文无效，
因为中文不存在大小写。

在CSS中，使用 text-transform属性来对文本进行大小写转换，
取值为 none | capitalize | uppercase | lowercase | full-width，默认为 none。

由于不同的浏览器，对单词的理解可能不同。比如，对于文本“text-transform”，Google Chrome浏览器会把它整体看作一个单词，而Firefox浏览器把它看作是“text”和“ransform”两个单词，中间用连字符连接。

因此，在 text-transform属性取值为 capitalize 时，在Google Chrome中得到的结果是 “Text-Transform”，而在Firefox中得到的结果是“Text-transform”。而CSS规范并没有明确规定使用哪一种转换方式，所以它们都是正确的结果。

<p class="capitalize">text-transform: capitalize</p>  

.capitalize{
    text-transform: uppercase;
}