纯 CSS 的逗号分隔跨度

Question

我有 - 比方说 - 在我的页面上有 4 个跨度。 每个内容都由我的视图模型中的淘汰赛填充。 有时内容在几个跨度内都是空的。 我想以一种很好的逗号分隔方式显示它们，同时考虑到可能的空性。

我尝试了以下 HTML 和 CSS。

版本 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>

版本 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的内容，并且我管理了第一个跨度也可以为空的情况。

 .comma:not(:first-child) { margin-left: -.3em; } .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:empty + .comma:not(:empty):before { content : ""; } .comma:not(:empty) ~ .comma:empty + .comma:not(:empty):before { content : ", "; }

 <div> <span class="comma">A</span> <span class="comma">B</span> <span class="comma">C</span> <span class="comma">D</span> </div> <hr /> <div> <span class="comma">A</span> <span class="comma">B</span> <span class="comma"></span> <span class="comma">D</span> </div> <div> <span class="comma">A</span> <span class="comma">B</span> <span class="comma">C</span> <span class="comma"></span> </div> <div> <span class="comma"></span> <span class="comma">B</span> <span class="comma">C</span> <span class="comma">D</span> </div> <div> <span class="comma">A</span> <span class="comma"></span> <span class="comma">C</span> <span class="comma">D</span> </div> <div> <span class="comma">A</span> <span class="comma">B</span> <span class="comma"></span> <span class="comma"></span> </div> <div> <span class="comma">A</span> <span class="comma"></span> <span class="comma">C</span> <span class="comma"></span> </div> <div> <span class="comma">A</span> <span class="comma"></span> <span class="comma"></span> <span class="comma">D</span> </div> <div> <span class="comma"></span> <span class="comma">B</span> <span class="comma">C</span> <span class="comma"></span> </div> <div> <span class="comma"></span> <span class="comma">B</span> <span class="comma"></span> <span class="comma">D</span> </div> <div> <span class="comma"></span> <span class="comma"></span> <span class="comma">C</span> <span class="comma">D</span> </div> <div> <span class="comma">A</span> <span class="comma"></span> <span class="comma"></span> <span class="comma"></span> </div> <div> <span class="comma"></span> <span class="comma">B</span> <span class="comma"></span> <span class="comma"></span> </div> <div> <span class="comma"></span> <span class="comma"></span> <span class="comma">C</span> <span class="comma"></span> </div> <div> <span class="comma"></span> <span class="comma"></span> <span class="comma"></span> <span class="comma">D</span> </div> <hr /> All empty: <div> <span class="comma"></span> <span class="comma"></span> <span class="comma"></span> <span class="comma"></span> </div>

---

有关MDN 上可用的:empty伪类的更多信息

Answer 2

转一圈。 而不是把一个逗号的跨度后，把它放在这之前（任何距离回来了！）由非空跨每跨前：

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

小提琴

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>