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

Question

我有一个示例文本，它都是大写的。我想让它大写文本，但 css text-transform 不起作用。我怎样才能做到这一点？

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 似乎是不可能的，对于单个单词文本旁边的内容。

单字片段

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

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

Answer 2

CSStext-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 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>

Answer 4

我编辑了他们的答案，将大写应用于第一行的所有第一个字母。

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

<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>