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

igetnqfo  于 2023-05-30  发布在  其他
关注(0)|答案(6)|浏览(138)

我有一个例子文本和它的全部大写。我想把它变成大写文本,但是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
gojuced7

gojuced71#

大写只影响单词的第一个字母。它不会改变单词中其余字母的大小写。例如,如果您将一个已经全部为大写字母的单词大写,则该单词中的其他字母不会切换为小写。当你的文本包含一个不应该包含任何小写字母的首字母缩写词或缩写词时,这是很好的。
如果您将提供的文本更改为小写,您将看到它工作得很好!
但要回答完整,我会尝试找到一种方法,以资本化与所需的方式,无论输入。
似乎这是不可能的,只有CSS,为旁边的一个单词的文本,如果你不是 Package 在一个不同的元素每个字。
单字片段

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

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

gmol16392#

CSS text-transform: capitalize只会影响第一个字符。
根据specs
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>
ff29svar

ff29svar3#

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

hkmswyz64#

我编辑了他们的答案,将第一行的所有第一个字母都大写。

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

jv4diomz5#

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

#text { text-transform: capitalize}

JavaScript:

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

JavaScript首先强制所有内容都小写,然后CSS将应用文本大写。

vlurs2pr

vlurs2pr6#

来扩展@Mystery的答案。关于Why is ::first-line not working for span like p / div tags?
根据MDN:
第一行只在块容器框中有意义,因此::first-line伪元素只对显示值为block、inline-block、table-cell或table-caption的元素有影响。在所有其他情况下,::first-line没有效果。
以下是W3C规范的摘录:(第7.1.1节CSS中的第一个格式化行定义)
在CSS中,::first-line伪元素只有在附加到类似块的容器(如块框、inline-block、table-caption或table-cell)时才有效。
由于span elements are display: inline by default::first-line选择器对它没有影响。如果我们将spandisplay更改为inline-blockblock,它将工作。

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

相关问题