如何在CSS中将每个单词的首字母大写？

Question

我试图将每个单词的首字母大写。我搜索过但没有找到，CSS可以实现吗？

目前我的代码仅适用于第一个字母。

---

HTML

<span>Some Text Value</span>

CSS

.listing-table table th:first-letter
{
    font-size: 15px;
    font-weight: bold;
}

- Syed Uzair Uddin

Answer 1

你可以尝试使用这个：

p { text-transform: capitalize; }

从文档中获取：

text-transform

此属性控制元素文本的大写效果。

capitalize将每个单词的第一个字符转换为大写；其他字符不受影响。

- Rahul Tripathi

Answer 2

如果元素中的文本已经全部是大写，那么仅使用CSS无法实现这一点，capitalize 样式也无法奏效，因为它只会将所有字母转换为大写。

p {
  text-transform: capitalize;
 }

<p>some text</p>
<p>Some text</p>
<p>SOME TEXT</p>
<p>sOME tExt</p>

如果整个文本已经是小写字母，则可以使用element{ text-transform: capitalize; }对其进行样式设置，但如果元素已经是大写字母，则text-transform: capitalize;无法实现“标题大写”。您需要在相关元素上插入JavaScript element.toLowerCase();，然后让CSS发挥它的魔力。

但是，根据提供的代码和你的问题，文本已经做了你想要的事情，css选择器不匹配该元素，因此我不太确定你想要实现什么效果。

- Petter of Cats

Answer 3

:first-letter 伪元素会选中您元素的第一个字母，而不是每个单词的第一个字母。此外，您在 HTML 中将代码包装在 span 中，但在 CSS 中却选中了一个 th，这样做是否正确？

尝试使用以下代码：

 .listing-table table th{
     text-transform: capitalize;
 }

文本转换的文档

- Drown

Answer 4

对于Bootstrap 5.1.3：

<div class="text-capitalize">
    aoisdj oaisjd jmansdkajn
</div>

- Aseem