css - CSS使短语复数

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

但是后来我们遇到了英语不规则的问题，并不是所有的复数都保证以“s”结尾。

Answer 2

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

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

这对我有用，因为我使用模板来呈现我的 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 个）来说，这并不是真正的问题。