CSS製作短語複數

基於元素內的數字，是否可以使用CSS將短語轉換爲複數形式？CSS製作短語複數

我猜這打破了演示/數據分離的邊界哲學，但只是想知道是否有可能。使用JavaScript很容易，但是想知道CSS是否可以處理它。

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

輸出：0書籍

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

輸出：1書

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

輸出：2書籍

來源

2014-10-27 Dave Sumter

你能做這樣的'0本書'嗎？（_btw，這是不可能的使用CSS，我在想別的東西_） – 2014-10-27 08:10:45

是的，但那似乎sooooo老派.. ;-) – 2014-10-27 09:43:39

編號 CSS無法讀取元素的內容以確定它是什麼數字，並且CSS沒有if條件。

如果你只適用.plural到應定期使用複數的項目，你可以這樣做：

.plural:after {content: "s"}

但後來我們碰上的英語怎麼是不規則的，而不是所有的複數都保證結束問題在「s」中。

來源

2014-10-27 08:08:38 Scimonster

謝謝，我認爲你是對的。我只能通過根據數字更改每個對象上的複數類名稱來使用解決方法。 – 2014-10-27 09:42:45

我們也可能遇到這樣的問題，即有超過6000種其他語言，並且有非常有趣的形式和使用複數形式。在這裏使用任何簡單的方法可以保證軟件嚴重不可本地化。您應該*生成*正確內容的HTML文檔，使用結構良好的代碼來生成短語，而不是通過接線方式添加後綴。 – 2014-10-27 14:11:30

要親自嘗試回答這個問題，因爲看起來純粹的CSS解決方案是不可能的。我發現了一個適用於我的小解決方法。這是不理想的，但也可能爲其他人工作。

我只是渲染複數類名稱後面的數字，並圍繞s包裝。然後，我使用plural1，它隱藏了的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）。

來源

2014-10-27 09:40:41

如果你渲染特殊的類名，那麼你也可以自己渲染後綴並完全放棄CSS。 – 2016-07-26 08:40:50

CSS製作短語複數

回答

相關問題