如何在 CSS 中仅将每个单词的第一个字母大写，同时保留现有的全部大写？

CSS 文本转换：大写全大写困境

CSS 中的 text-transform 属性控制文本的大小写。当设置为“大写”时，它将每个单词的第一个字母大写。然而，在处理已经全部大写的单词时，这会带来挑战。

问题

在提供的 HTML 和 CSS 片段中：

<a href="#" class="link">small caps</a> & 
<a href="#" class="link">ALL CAPS</a>

.link {
  text-transform: capitalize;
}

输出为“小型大写字母和全部大写字母”，而所需的输出为“小型大写字母和全部大写字母”。

解决方案

为了达到所需的结果，可以采用 CSS 规则的组合：

.link {
  text-transform: lowercase;
}

.link:first-letter,
.link:first-line {
  text-transform: uppercase;
}

• text-transform: lowercase 规则将“.link”元素中的所有文本转换为小写。
• 应用于伪元素 :first-letter 和 :first-line 的 text-transform: uppercase 规则分别将每个元素的第一个字母和第一行大写。

这种方法确保已经全部大写的单词（例如“ALL CAPS”）将被保留，同时仍将其他单词的第一个字母大写。结果输出将是：

Small Caps 
All Caps

以上是如何在 CSS 中仅将每个单词的第一个字母大写，同时保留现有的全部大写？的详细内容。更多信息请关注PHP中文网其他相关文章！