Ngăn cách nhau bằng dấu phẩy với CSS tinh khiết

Question

Tôi có - giả sử - 4 nhịp trên trang của tôi trong một khối. Các nội dung của từng được dân cư của knockout từ viewmodel của tôi. Đôi khi nội dung trống trong một vài nhịp. Tôi muốn hiển thị chúng theo cách được phân tách bằng dấu phẩy, đẹp, có thể tính đến sự trống rỗng.

Tôi đã thử HTML và CSS sau.

VERSION 1

Nó cho thấy dấu phẩy cho nhịp trống cũng

.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

Nó cho thấy một (trực quan) dấu phẩy cuối cùng nếu khoảng thời gian cuối cùng là có sản phẩm nào .

.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>

Làm thế nào tôi có thể tinh chỉnh nó để render luôn đúng, bất kể khoảng cách là (nếu có)? Tôi chỉ cần hỗ trợ các trình duyệt hiện đại (IE9 + và các trình duyệt khác).

Answer 1

tôi đảo ngược logic, đặt dấu phẩy là phần nội dung của before pseudoelement

Ví dụ: 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: ", "; 
} 

---

Nếu cũng là yếu tố đầu tiên .comma thể để trống, thì đây là một phức tạp hơn cách tiếp cận

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 : ", "; 
} 

dụ cuối đã được thử nghiệm thành công chống lại tất cả các kết hợp có thể có của 4 yếu tố

---

Thông tin thêm về :empty pseudoclass sẵn trên MDN

Answer 2

Chuyển quanh. Thay vì đặt một dấu phẩy sau nhịp của bạn, đặt nó trước mỗi khoảng thời gian mà trước (bất kỳ khoảng cách trở lại!) Bởi một khoảng không trống:

.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

Dưới đây nên làm điều đó, cho chỉ là về bất kỳ sự kết hợp, mà không che giấu bất cứ điều gì.

.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>