小写全部然后大写 - 纯CSS [重复]

Question

我在这里看到了这个话题：First lowercase the text then capitalize it. Is it possible with CSS?

但这不是纯 CSS。我有一个包含此文本的 div：

<div>
RaWr rAwR
</div>

我想用 css 让它看起来像“Rawr Rawr”。如果我只是将文本转换为大写，则将其剪切为“RaWr RAwR”，已经大写的字母保持大写。所以我需要先将它全部小写然后大写，将它包装在一个div中的解决方案是什么？

我尝试将其包装在另一个 div 中，但没有成功：

<style>
    #test3 { text-transform: lowercase; }
    #test3 div { text-transform: capitalize; }
</style>

<div id="test3"><div>RaWr rAwR</div></div>

Answer 1

当你在不同的 div 中有单个单词时应该这样做

#test3 { text-transform: lowercase; }

#test3::first-letter { text-transform: uppercase; }


<div id="test3">haLLo</div>

Answer 2

您正在使用嵌套的 div，

所以 #test3 { text-transform: lowercase; } 应用于 Parent div 所以它适用于 Parent 和 Child Divs

当您将 #test3 div { text-transform: capitalize; } 覆盖到子 Div 时，第一个样式 text-transform: lowercase; 将被忽略

Answer 3

不幸的是，在 CSS 3 之前，没有办法以纯 CSS 方式执行此操作，根据 this 文档，text-transform 只有 5 个可能的值，它们都不能解决这个要求！

但将来可能会提供类似于Counter Sytle的文本转换自定义规则

Answer 4

遗憾的是，纯 CSS 无法做到这一点。目前，您最好的希望是重写文本以避免中间/结尾大写或使用 JavaScript。 （是的，我的眼睛也在转动。）

您建议的方法不起作用，因为一次只有一个 text-transform 属性值适用于一个元素。当您指定类似...

#parent { text-transform: lowercase; }
#parent #child { text-transform: capitalize; }

...子元素上text-transform 的值现在是capitalize，仅此而已。这是应用于该元素的唯一转换。

有一个提案草案允许作者define custom mapping tables with an @text-transform rule，但就目前而言，我怀疑它是否适用于这种情况。问题是scope descriptor（在一个单词中应用转换的地方）只接受一个值——你可以定义整个单词的转换，或者单词的开头、结尾或中间部分的某种组合，但这并不明显如果您可以对每个部分进行不同的转换。

这似乎在 wiki 提案草案的问题 8 和 multiple transforms were discussed a couple of years back on www-style 中得到承认。在该线程中，建议在一个元素上只允许一个 text-transform 值，并且应该在 @text-transform 规则中进行组合；但是，规范草案指出：

如果引用的文本转换具有与指定范围不同的范围 在引用它们的文本转换中，它们适用于 两个作用域。

所以这样的规则行不通：

@text-transform lowercase-then-capitalize {
    transformation: lowercase, "a-z" to "A-Z" single;
    scope: initial;
}

我可以看到三个明显的解决方案：

1. 允许在@text-transform 规则中指定多个scope 值；
2. 添加描述符以继承先前的转换而不覆盖其范围值；或
3. 允许一个选择器有多个 text-transform 值。

The www-style mailing list 可能是一个不错的选择，如果你想看到这个问题的纯 CSS 解决方案。