为什么Css文本转换大写不起作用？

Question

我有一个例子文本和它的所有大写。我想把它变成大写文本，但是css文本转换不起作用。我该怎么做？

​

span,
a,
h2 {
  text-transform: capitalize !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<span class="ml-5 mt-5 d-block">IT IS AN EXAMPLE TEXT</span>

<h2><a class="ml-5 mt-5 d-block" href="#">IT IS AN EXAMPLE TEXT IN HREF</a></h2>

​

您可以签入JSFiddle

我要上面的第一个字母，所有单词的其他较低的字母。如下所示：

It Is An Example Text

Answer 1

CSS text-transform: capitalize只会影响第一个字符。

根据规格

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

我强烈建议只编辑内容。记住，归根结底，像css这样的技术只是解决问题的一种方法。更好的解决方案是编辑该内容并将其大写，无论是存储在数据库中还是只存储在标记中的静态内容。

作为黑客(如果您真的想使用代码级解决方案)，您可以使用JavaScript首先将所有字母转换为小写。然后使用/\b(\w)/g匹配前几个字母的实例，然后在每个字母上使用toUpperCase()

​

document.querySelector("a").innerText = document.querySelector("a").innerText.toLowerCase().replace(/\b(\w)/g, x => x.toUpperCase());

<h2><a class="ml-5 mt-5 d-block" href="#">IT IS AN EXAMPLE TEXT IN HREF</a></h2>

​

Answer 2

大写只影响单词的首字母。它不会在一个词中改变其余字母的情况。例如，如果你用大写字母大写一个单词，那么这个单词中的其他字母就不会转换成小写字母。这是很好的，当你的文本包括一个缩写或缩写，不应该包括任何小写字母。

如果您将所提供的文本更改为小写，您将看到它工作得很好！

但要回答完整，我将设法找到一种方法来资本化所期望的方式，无论输入。

似乎不可能只使用CSS，如果您没有将每个单词包装在不同的元素中，那么除了一个单词文本之外，还可以找到其他的东西。

单字片段

span,
a,
h2 {
   text-transform:lowercase
}

span:first-letter,
a:first-letter,
h2:first-letter {
  text-transform: capitalize;
}

Answer 3

​

span,
a,
h2 {
  text-transform: lowercase !important;
}
span:first-letter,
a:first-letter,
h2:first-letter {
  text-transform: capitalize !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<span class="ml-5 mt-5 d-block">IT IS AN EXAMPLE TEXT</span>

<h2><a class="ml-5 mt-5 d-block" href="#">IT IS AN EXAMPLE TEXT IN HREF</a></h2>

​