小写全部然后大写 – 纯CSS

参见英文答案 > First lowercase the text then capitalize it. Is it possible with CSS?2
我在这里看到这个话题： 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>

解决方法

可悲的是,你不能用纯CSS做这个.现在,您最好的希望是重写文本以避免内部/最后的大写或使用JavaScript. (是的,我的眼睛也滚滚.)

您建议的方法不起作用,因为一次只能对元素应用一个文本转换属性值.当你指定像…

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

… child元素上的text-transform的值现在大写,没有别的.这是应用于该元素的唯一转换.

有一份草案提案允许作者到define custom mapping tables with an @text-transform rule,但是我认为这将有助于这种情况.问题在于scope descriptor(转化适用于这个词)只需要一个价值 – 你可以定义一个单词的转换,或一个单词的开始,结尾或中间部分的某种组合,但是如果你可能对每个部分都有不同的转换.

这在Wiki草案提案和multiple transforms were discussed a couple of years back on www-style的问题8中似乎得到了承认.在该线程中,建议在元素上只允许使用单个文本变换值,并且该组合应该在@ text-transform中完成规则;但是,草案规定：

If the text-transforms referred to have a different scope than the scope specified
in the text-transform that refers to them,they apply at the intersection of the
two scopes.

所以这样的规则是不行的：

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

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

>允许在@ text-transform规则中指定多个范围值;
>添加一个描述符来继承先前的转换,而不会覆盖其范围值;要么
>允许选择器的多个文本变换值.

The www-style mailing list可能是一个好的地方,如果你想要看到一个纯CSS的解决方案,这个问题.

原文地址：https://www.jb51.cc/css/217318.html