純粋なCSSでカンマ区切りにされた

Question

私はブロック内のページに4つのスパンを入れています。それぞれのコンテンツは、私のビューモデルからのノックアウトによって設定されます。コンテンツがいくつかのスパンで空の場合もあります。私は素敵なコンマ区切りの方法でそれらを表示し、空の可能性を考慮したいと思います。

私は次のHTMLとCSSを試しました。

VERSION 1

これは、最後のスパンが空である場合は、（視覚）、最後のコンマを示す空のスパンのためのカンマも

.comma:not(:last-child):after { 
 
    content: ", "; 
 
}

<span class="comma">A</span> 
 
<span class="comma">B</span> 
 
<span class="comma"></span> 
 
<span class="comma">D</span>

VERSION 2

を示します。私はそれは、正しく常にギャップが（もしあれば）あるどんなにをレンダリングするために微調整することができる方法

.comma:not(:empty):not(:last-child):after { 
 
    content: ", "; 
 
}

<span class="comma">A</span> 
 
<span class="comma">B</span> 
 
<span class="comma">C</span> 
 
<span class="comma"></span>

？ 最新のブラウザー（IE9 +など）のみをサポートする必要があります。

Answer 1

私はbefore pseudoelementのコンテンツとしてカンマを置く、ロジックを逆転

例：http://codepen.io/anon/pen/NPdbbw

/* remove extra space before the comma */ 
.comma:not(:first-child) { 
    margin-left: -.3em; 
} 

/* no need to display empty elements */ 
.comma:empty { 
    display: none; 
} 

.comma:not(:first-child):before { 
    content: ", "; 
} 

---

最初.comma要素を空にすることができ、また場合は、ここでより複雑ですアプローチ

http://codepen.io/anon/pen/BypQRd

.comma:not(:first-child) { 
    margin-left: -.3em; 
} 

/* next 2 rules are for spacing when the first .comma is empty too */ 
.comma:first-child:empty ~ .comma:not(:empty) { 
    margin-left: 0; 
} 

.comma:first-child:empty ~ .comma:not(:empty) ~ .comma:not(:empty) { 
    margin-left: -.3em; 
} 

.comma:empty { 
    display: none; 
} 

.comma:not(:first-child):before { 
    content: ", "; 
} 

.comma:not(:first-child):before { 
    content: ", "; 
} 

.comma:empty + .comma:not(:empty):before { 
    content : ""; 
} 

.comma:not(:empty) ~ .comma:empty + .comma:not(:empty):before { 
    content : ", "; 
} 

最後の例では、正常MDN

Answer 2

スイッチそのラウンドで利用可能な4つの要素

---

さらなる情報について:empty疑似クラスのすべての可能な組み合わせに対してテストされています。代わりにあなたのスパンの後にコンマを置くと、先行され前に各スパン（任意の距離バックを！）それを置く非空のスパンによって：

.comma:not(:empty) ~ .comma:not(:empty):before { 
    content: ", "; 
} 

Fiddle

Answer 3

http://jsfiddle.net/xtrabhwh/3/

<span class="comma">A</span><span class="comma">B</span><span class="comma">C</span><span class="comma"></span> 

.comma ~ .comma:not(:empty):before { 
    content: ", "; 
} 

Answer 4

以下は、何かを隠すことなく、どんな組み合わせであってもそうです。

.comma:before { 
 
    content: ',' 
 
} 
 
.comma:empty:before, 
 
.comma:first-of-type:before, 
 
.comma:first-of-type+.comma:empty:before, 
 
.comma:empty+.comma:not(:last-of-type):before, 
 
.comma:empty+.comma:empty:before { 
 
    content: ''; 
 
}

<h4>Missing first</h4> 
 
<div> 
 
    <span class="comma"></span> 
 
    <span class="comma">item</span> 
 
    <span class="comma">item</span> 
 
    <span class="comma">item</span> 
 
</div> 
 
<h4>Missing last</h4> 
 
<div> 
 
    <span class="comma"></span> 
 
    <span class="comma">item</span> 
 
    <span class="comma">item</span> 
 
    <span class="comma">item</span> 
 
</div> 
 
<h4>Missing first two</h4> 
 
<div> 
 
    <span class="comma"></span> 
 
    <span class="comma"></span> 
 
    <span class="comma">item</span> 
 
    <span class="comma">item</span> 
 
</div> 
 
<h4>Missing last two</h4> 
 
<div> 
 
    <span class="comma">item</span> 
 
    <span class="comma">item</span> 
 
    <span class="comma"></span> 
 
    <span class="comma"></span> 
 
</div> 
 
<h4>Missing middle</h4> 
 
<div> 
 
    <span class="comma">item</span> 
 
    <span class="comma">item</span> 
 
    <span class="comma"></span> 
 
    <span class="comma">item</span> 
 
</div> 
 
<h4>Missing middle two</h4> 
 
<div> 
 
    <span class="comma">item</span> 
 
    <span class="comma"></span> 
 
    <span class="comma"></span> 
 
    <span class="comma">item</span> 
 
</div>