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

Posted 2023-02-21

【中文标题】小写全部然后大写 - 纯CSS [重复]

【英文标题】：Lower case all then capitalize - pure CSS [duplicate]

【发布时间】：2014-03-16 15:33:51

【问题描述】：

我在这里看到了这个话题：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>

【问题讨论】：

由于链接问题中的 cmets 状态，纯 CSS 无法做到这一点。您将需要使用 javascript。

是的，我试过了，我想知道是否有任何新方法，bisdato 在下面给出了有趣的解决方案

【参考方案1】：

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

#test3  text-transform: lowercase; 

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


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

【讨论】：

仅适用于第一个字母虽然Rawr rawr 不是Rawr Rawr。

div里面有多个单词我觉得不行

啊，这很好！至少它只有一个字。我喜欢这个也不需要包装。我会记住这个以备不时之需，但它现在对我没有帮助:(仍然+1

这对我有帮助，谢谢！

应该是'#test3::first-letter '

【参考方案2】：

您正在使用嵌套的 div，

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

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

【讨论】：

啊是的，它不起作用:(我希望有一个非嵌套解决方案

【参考方案3】：

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

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

【讨论】：

直到 CSS-3？ CSS 3 能做什么？

如更新的答案中所述，可能有规定允许我们自定义定义text-transform 规则

【参考方案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;

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

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

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

【讨论】：

真诚地感谢您提供这个非常棒的答案！我现在知道当他们实施它时该怎么做。非常感谢！我现在也知道当前的限制是什么。