为什么CSS文本转换大写不起作用?

时间:2018-09-04 11:37:00

标签: css capitalize

我有一个示例文本,全部为大写。我想将其大写,但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

5 个答案:

答案 0 :(得分:1)

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

如果将提供的文本更改为小写,您会发现它工作正常!

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

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

单个单词段

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

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

答案 1 :(得分:1)

您可以使用javascript首先将所有字母转换为小写。然后使用/\b(\w)/g匹配首字母的实例,然后在每个字母上使用toUpperCase()

document.querySelector("a").innerText = document.querySelector("a").innerText.toLowerCase().replace(/\b(\w)/g, x => { return x.toUpperCase(); });
<h2><a class="ml-5 mt-5 d-block" href="#">IT IS AN EXAMPLE TEXT IN HREF</a></h2>

答案 2 :(得分:1)

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

CSS:

#text { text-transform: capitalize} 

JavaScript:

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

JavaScript首先会强制将所有内容转换为小写,然后CSS将使用大写字母。

答案 3 :(得分:0)

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>

答案 4 :(得分:0)

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

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>