小写字母全部大写-纯CSS [英] Lower case all then capitalize - pure CSS

问题描述

我在这里看到了这个主题：首先小写文本，然后大写。

I saw this topic here: First lowercase the text then capitalize it. Is it possible with CSS?

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

But it wasn't pure CSS. I have a div that contains this text:

<div>
RaWr rAwR
</div>

我想使用css使其看起来像 Rawr Rawr。如果我只是将文本转换为大写字母，请切成小写，使其变为 RaWr RAwR，已经大写的字母仍为大写。因此，我需要先将其全部转换为小写，然后再大写，是将其包装在div中的解决方案吗？

I want to use css to make it look like "Rawr Rawr". Cut if I just to text-transform capitalize it makes it "RaWr RAwR", the already uppercase letters remain upper case. So I need to lower case it all first then capitalize, is the solution to wrap it in a div?

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

I tried wrapping it in another div but it didnt work:

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

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

推荐答案

遗憾的是，您不能使用纯CSS做到这一点。现在，您最大的希望是重写文本以避免使用中间/最后大写字母或使用JavaScript。 （是的，我的眼睛也在滚动。）

Sadly, you cannot do this with pure CSS. For now your best hope is to either rewrite text to avoid medial/final capitals or use JavaScript. (Yes, my eyes are rolling too.)

您建议的方法不起作用，因为只有一个文本转换属性值一次应用于一个元素。当您指定以下内容时……

Your suggested approach doesn't work because only one text-transform property value applies to an element at a time. When you specify something like…

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

…文本转换的值现在，子元素上的首字母大写，仅此而已。这是应用于该元素的唯一转换。

…the value of text-transform on the child element is now capitalize, and nothing else. This is the only transformation applied to that element.

有一项提案草案允许作者使用 @ text-transform 规则定义自定义映射表，但我怀疑这是否适用于这种情况。问题是 scope 描述符（在一个单词中适用转换的地方）仅取一个值-您可以在整个单词或单词的开始，结尾或中间部分的某种组合上定义一个转换，但不是

There is a draft proposal to allow authors to define custom mapping tables with an @text-transform rule, but as it stands I doubt it would work for this scenario. The problem is that the scope descriptor (where in a word the transformation applies) only takes one value—you could define a transformation on the whole word or some combination of the start, end or middle parts of a word, but it's not obvious if you could have different transformations for each part.

这似乎在Wiki草案的问题8 和中得到了认可。 href = http://lists.w3.org/Archives/Public/www-style/2011Dec/0418.html rel = noreferrer>数年前在www-style上讨论了多种转换 。在该线程中，建议在元素上仅允许单个 text-transform 值，并且应在 @text中进行合并-transform 规则；但是，规范草案指出：

This seems to be acknowledged in Issue 8 on the wiki draft proposal, and multiple transforms were discussed a couple of years back on www-style. In that thread it is suggested that only a single text-transform value should be allowed on an element, and that combining should be done in the @text-transform rule; however, the draft spec notes:

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

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;
}

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

I can see three obvious solutions:

1. 允许在 @ text-transform scope 值c>规则；


2. 添加一个描述符以继承先前的转换，而不会覆盖其范围值；或


3. 允许选择器使用多个文本转换值。

1. allow multiple scope values to be specified in the @text-transform rule;
2. add a descriptor to inherit a previous transformation without overriding its scope value; or
3. permit multiple text-transform values for a selector.

www风格的邮件列表可能是如果您想看到这个问题的纯CSS解决方案，那么这是一个好地方。

The www-style mailing list might be a good place to take this if you ever want to see a pure CSS solution to this question.

这篇关于小写字母全部大写-纯CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！