Question

我有 - 让我们说 - 我的页面上有4个跨度。每个内容都由我的viewmodel中的knockout填充。有时几个内容的内容是空的。我希望以一种漂亮的，以逗号分隔的方式显示它们，并考虑可能的空白。

我尝试了以下HTML和CSS。

版本1

它还显示空跨区的逗号

＆＃13;

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

＆＃13;

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

＆＃13;

版本2

如果最后一个跨度为空，则显示（视觉上）最后一个逗号。

＆＃13;

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

＆＃13;

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

＆＃13;

无论差距在哪里（如果有的话），我怎么能调整它才能始终正确渲染？我只需要支持现代浏览器（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 : ", ";
}

最后一个示例已针对4个元素的所有可能组合进行了成功测试

MDN

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

Answer 2

切换它。而不是在你的跨度之后放一个逗号，把放在前面的每个跨度（任何距离！）之前的非空跨度：

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

逗号分隔的跨度与纯CSS

4 个答案: