文本转换 | CSS-Tricks

CSS 中的 text-transform 属性控制文本的大小写和首字母大写。

.lowercase {
  text-transform: lowercase;
  }

文本转换值

lowercase 使选定文本中的所有字母都变为小写。
uppercase 使选定文本中的所有字母都变为大写。
capitalize 将选定文本中每个单词的首字母大写。
none 保留文本的大小写和首字母大写，与输入时完全一致。
inherit 使文本的大小写和首字母大写与父级文本一致。

下面的演示展示了 lowercase、uppercase 和 capitalize 的使用方式。查看 HTML 选项卡以查看文本的原始写法，然后切换回结果选项卡以查看应用 CSS 后的效果。

查看 CodePen 上 mariemosley 的示例：0f4293fce0d14aafc3818c950ab0ded3 (@mariemosley) on CodePen.

关注点

capitalize 会将出现在单引号或双引号中的单词的首字母大写，以及连字符后的第一个字母。它不会将数字后的第一个字母大写，因此像“February 4th, 2015”这样的日期不会转换为“February 4Th, 2015”。

capitalize 只影响单词的首字母。它不会更改单词中其余字母的大小写。例如，如果您 capitalize 一个完全是大写字母的单词，该单词中的其他字母不会变为小写。当您的文本包含缩略语或首字母缩略词时，这很有用，这些缩略语或首字母缩略词不应该包含任何小写字母。

CSS 无法做到“标题大小写”，即书籍、电影、歌曲和诗歌标题中使用的首字母大写样式，其中冠词为小写（例如“夺宝奇兵”）。但是，JavaScript 有标题大小写的解决方案，包括 David Gouch 的 toTitleCase()。

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
任何	任何	任何	任何	任何	任何	任何

Firefox 支持土耳其语、德语、荷兰语和希腊语的语言特定首字母大写规则，而其他浏览器不支持。 Firefox 也是唯一支持 text-transform: full-width; 的浏览器，这有助于提高包含拉丁文和东亚文字混合的文本的可读性。查看 MDN 上的详细信息.

Joe

# 2015 年 12 月 2 日

如果内容以全大写字母输入，而前端应该首字母大写，使用 capitalize 将不起作用，正如 Chris 指出的那样。如何使用 CSS 将所有大写字母更改为首字母大写的单词，而不必进入 CMS 并更改文本？我尝试将文本包裹在父级 span 中，将其小写，然后将子级 span 大写，但这没有奏效，原因很明显——但它也是那些“不妨试试”的想法之一。

Jorge Hawkins

评论永久链接# 2016 年 11 月 7 日

对第一个字母使用 text-transform: uppercase，对其余部分使用 text-transfrom: lowercase。

element:first-letter {text-transform:uppercase} element {text-transform:lowercase}
samuel

评论永久链接# 2017 年 2 月 2 日

我试过这个

element:first-letter {text-transform:uppercase}
element {text-transform:lowercase}

但这不起作用。它将所有字母都变为小写字母。
Joe G

评论永久链接# 2017 年 2 月 2 日
@Samuel . 当字母以全大写字母进入源代码时，这奏效了。在 Chrome 中测试过。您在哪个浏览器中尝试它？它是跨浏览器兼容的，所以应该没问题：https://caniuse.cn/#search=first-letter
```
.page-content .page-title::first-letter {
    font-weight: 600;
    text-transform: uppercase;
}
.page-content .page-title {
    font-size: 26px;
    text-transform: lowercase;
}
```
Duncan

评论永久链接# 2017 年 5 月 10 日

@samuel
只是为了澄清
selector:first-letter {} 1x : 不起作用，因为这是尝试定位伪类。

它必须是
selector::first-letter {} 2x : 它定位“first-letter”伪元素。

Joe 的代码段正确使用了 ::。
Govind Patil

评论永久链接# 2017 年 11 月 6 日

这里需要更正浏览器支持。
IE11 及更低版本不支持“initial”值。相反，我们可以设置值“none”，它适用于所有主流浏览器。

Karthik

# 2016 年 3 月 3 日

@JOE，我遇到了与你类似的问题。输入数据全部是大写字母，我使用 CSS text-transform:capitalize 将其转换为驼峰式/标题式，然后再将其转换为小写字母。但现在的问题是，一些缩写和首字母缩略词，如“US”或“U.S”，也经历了这种转换。这需要避免。有什么想法或建议吗？

Kellie

# 2017 年 3 月 15 日

希望有一个“句子大小写”，这样我就可以将大块的全大写字母文本变成舒适易读的句子，只将第一个单词的首字母大写。也许在下一个版本的 CSS 中？(祈祷中……)

Andrew

评论永久链接# 2018 年 7 月 19 日

试试这个……

.item {
text-transform: lowercase;
}

item:first-letter {
text-transform: capitalize;
}

Vishal

# 2017 年 10 月 26 日

如果显示为内联，上面的方法将不起作用。

Lars

评论永久链接# 2018 年 10 月 19 日

非常有用的评论 ++。我刚刚将其添加到一个 span 中，最终在其上使用了 display: inline-block，这在我的用例中还有其他好处。

Sara Walker

# 2018 年 6 月 15 日

CHRIS COYIER - 你真是太棒了！你每天都在用你的“CSS Tricks”帮助我。感谢你的见解——一如既往。

Luke R

# 2019 年 8 月 2 日

看起来在 Firefox 中，连字符词只有第一个单词首字母大写，即“Double-parked”，而不是“Double-Parked”。

Theresa

# 2020 年 3 月 31 日

另一个值得注意的地方是，() 内的任何内容也会被大写，这意味着“grade level(s)”会变成“Grade Level(S)” :(

Daniel Dibaba

# 2021 年 7 月 3 日

我认为顺序很重要。将 element {text-transform:lowercase} 放在首位，然后

item:first-letter {
  text-transform: capitalize;
}

下一个

Harry

# 2023 年 1 月 12 日

我们如何处理像“McTavish”或“O'Brien”这样的东西？

文本转换值

关注点

相关属性

更多信息

浏览器支持

文本转换值

关注点

相关属性

更多信息

浏览器支持

评论

发表回复 取消回复

发表回复取消回复