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

【问题标题】：Why Css text-transform capitalize not working?为什么 Css 文本转换大写不起作用？
【发布时间】：2019-02-09 10:28:46
【问题描述】：

我有一个示例文本，全部大写。我想让它大写文本，但 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

【问题讨论】：

所以你想要什么？文本 - 除了首字母（或第一个字母） - 是小写的？ “......不起作用”不是对问题的充分描述；你到底期待什么，结果发生了什么？
已编辑问题。对不起。
这不是 CSS 可以做的——因为文本已经全部大写，所以每个单词的首字母大写在视觉上没有区别（这可能是设计使然，但老实说感觉就像错误），并且没有 :word 伪类 - JavaScript 是一种可能性，还是只能是 CSS？
不可以用javascript和php。 @大卫托马斯

标签： css capitalize

【解决方案1】：

Capitalize 仅影响单词的首字母。它不会改变单词中其余字母的大小写。例如，如果您将一个已经全部大写的单词大写，则该单词中的其他字母不会切换为小写。当您的文本包含不应包含任何小写字母的首字母缩写词或缩写时，这很好。

如果您将提供的文本更改为小写，您会发现它工作得很好！

但要完整回答，无论输入如何，我都会尝试找到一种以所需方式大写的方法。

如果您没有将每个单词包装在不同的元素中，那么似乎仅使用 CSS 是不可能的，对于单个单词文本旁边的内容。

单字sn-p

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

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

【讨论】：

【解决方案2】：

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>

【讨论】：

可以应用于所有单词吗？

【解决方案3】：

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

根据specs：

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

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

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

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

&lt;h2&gt;&lt;a class="ml-5 mt-5 d-block" href="#"&gt;IT IS AN EXAMPLE TEXT IN HREF&lt;/a&gt;&lt;/h2&gt;

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

我的解决方案是同时使用 JavaScript 和 CSS。

CSS：

#text { text-transform: capitalize}

Javascript：

document.getElementById("text").innerHtml = document.getElementById("text").innerHtml.toLowerCase()

JavaScript 将首先强制所有内容为小写，然后 CSS 将应用 text-capitalize。

【讨论】：