25

我在这里看到了这个话题：首先将文本小写然后大写。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>
4

4 回答 4

22

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

#test3 { text-transform: lowercase; }

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


<div id="test3">haLLo</div>
于 2014-02-17T11:14:22.770 回答
15

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

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

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

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

有一个提案草案允许作者使用规则定义自定义映射表@text-transform，但就目前而言，我怀疑它是否适用于这种情况。问题是scope描述符（在一个单词中应用转换的地方）只取一个值——您可以定义整个单词或单词开头、结尾或中间部分的某种组合的转换，但如果您每个部分可以有不同的转换。

这似乎在wiki 提案草案的第 8 期中得到承认，并且几年前在 www-style 上讨论了多种转换。在那个线程中，建议text-transform在一个元素上只允许一个值，并且应该在@text-transform规则中进行组合；但是，规范草案指出：

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

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

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

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

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

如果你想看到这个问题的纯 CSS 解决方案，www 风格的邮件列表可能是一个不错的选择。

于 2014-02-17T12:59:27.500 回答
1

您正在使用嵌套 div，

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

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

于 2014-02-17T11:20:13.410 回答
1

不幸的是，在 CSS 3 之前，没有办法以纯 CSS 方式做到这一点，根据本文档，只有 5 个可能的值text-transform，它们都不能解决这个要求！

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

于 2014-02-17T11:23:09.327 回答