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

可悲的是，你不能用纯CSS做到这一点。现在你最好的希望是重写文本以避免使用medial / final资本或使用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;
}

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

允许在scope规则中指定多个@text-transform值;
添加描述符以继承先前的转换，而不用覆盖其范围值;或
允许选择器使用多个text-transform值。

The www-style mailing list可能是一个很好的选择。

Answer 3

您正在使用嵌套div

所以#test3 { text-transform: lowercase; }适用于父div，因此它适用于父母和子女双方

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

Answer 4

不幸的是，直到CSS-3无法以纯CSS的方式执行此操作，因为根据this文档，text-transform只有5个可能的值，并且它们都不会解决此要求！< / p>

但是将来可能会为文本转换提供类似于Counter Sytle

的自定义规则

小写全部然后大写 - 纯CSS

4 个答案: