1

要素内の数字に基づいて、CSS だけを使用してフレーズを複数形に変換することは可能ですか?

これはプレゼンテーションとデータ分離の境界の哲学を壊していると思いますが、それが可能かどうか疑問に思っています。JavaScript で簡単にできますが、CSS で対応できるかどうかは疑問です。

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

出力: 0 本

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

出力：1冊

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

出力: 2冊

4

2 に答える 2

9

いいえ。CSS は要素の内容を読み取ってそれが何番であるかを判断することはできず、CSS には条件がありませんif。

定期的に複数形にする必要があるアイテムにのみ適用する場合は.plural、次のようにできます。

.plural:after {content: "s"}

しかし、その後、英語が不規則であり、すべての複数形が「s」で終わることが保証されているわけではないという問題に直面します。

于 2014-10-27T08:08:38.997 に答える
1

純粋な 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) は、実際には問題になりません。

于 2014-10-27T09:40:41.460 に答える