Question

是否可以根据元素中的数字使用CSS将短语转换为复数？

我猜这打破了演示/数据分离边界的理念，但只是想知道它是否可行。使用JavaScript很容易，但想知道CSS是否可以处理它。

<span class="plural">0 book</span>

输出： 0本书

<span class="plural">1 book</span>

输出： 1本书

<span class="plural">2 book</span>

输出： 2本书

Answer 1

不。 CSS无法读取元素的内容以确定它是什么数字，而且CSS没有if条件。

如果您只将.plural应用于应定期复数的项目，您可以这样做：

.plural:after {content: "s"}

但是接下来我们遇到了英语不规则的问题，并不是所有的复数都能保证以＃34;结尾。

Answer 2

我自己尝试回答这个问题，因为看起来纯粹的CSS解决方案是不可能的。我找到了一个适合我的小解决方法。它并不理想，但也可能适用于其他人......

我只是渲染复数类名后面的数字并将其包裹在 s 周围。然后我使用隐藏 s 的 plural1 类。

这对我有用，因为我使用模板来渲染我的html，并且很容易插入数字。

.plural1 {
  display: none;
}

<div>-1 book<span class="plural-1">s</span> 
</div>

<div>0 book<span class="plural0">s</span> 
</div>

<div>1 book<span class="plural1">s</span> 
</div>

<div>2 book<span class="plural2">s</span> 
</div>

优点：这也适用于其他结局和其他语言。支持负数。

缺点：将未使用的类添加到浏览器需要读取和忽略的元素（plural2，plural3等）中。虽然不是少数对象的问题（例如，100）。

CSS使短语复数

2 个答案: