使用纯 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

切换它。不要在您的跨度之后放置逗号，而是将它放在 before 每个跨度之前（任意距离！）由一个非空跨度：

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