使用文本转换强制CSS中的标题大小写输入

Question

我正在为CMS创建一个主题,并且只能更改与页面关联的CSS(没有Javascript,PHP等).

有没有办法更改我们拥有的用户列表:

JOHN SMITH
DAVID JONES
......

使用CSS进入正确的标题案例(约翰史密斯等)？

text-transform: lowercase;工作正常(约翰史密斯等),但text-transform: capitalize;什么都不做(仍然大写).

---

根据要求,HTML是:

<tr> [...] <td class="cell c1">ALEXANDER MULLER</td> [...] </tr>
<tr> [...] <td class="cell c1">JOHN SMITH</td> [...] </tr>

CSS是:

td {
    text-transform: capitalize;
}

Answer 1

text-transform: capitalize; 仅修改每个单词的第一个字母,因此如果单词的第一个字母已经大写,则text-transform会跳过该单词.

例:

JoHN smith 会变成 JoHN Smith

除非你的所有单词都是小写的,否则无法使用CSS进行title-casing.

Answer 2

我们可以使用技巧来做到这一点.但请注意浏览器兼容性. https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

p{
  text-transform: lowercase;
 }

p:first-letter{
  text-transform: uppercase;
}

例如:

这是一些文字.

这是一些文字.

这是一些文字.

输出 - >这是一些文字

Answer 3

您的体验是它的工作原理.这是来自规范:

" 大写"将每个单词的第一个字符设为大写;其他字符不受影响."

现在,你可以这样做(我假设你有一个包含列表项<li>标签的列表:

li:first-letter {
    text-transform: uppercase;
}

除了你的小写的li,但组合只会影响每一行的第一个单词,所以你得到:

John smith
David jones

我不相信这里有一个纯CSS解决方案.这很棘手,因为像John McCain,Oscar de la Hoya,John Smith PhD,Jane Smith MD以及喜欢小写的人如danah boyd或ee cummings这样的名字.当您尝试使用Title Case时,总会有例外情况.这些例外会让您头疼.如果您无法控制内容,则内容会令您头疼.