Html 使用纯CSS的逗号分隔跨距

我的页面在一个块中有4个跨距。每个视图的内容都由my viewmodel中的敲除填充。有时内容在几个跨度内为空。我想以一种漂亮的、逗号分隔的方式显示它们，同时考虑到可能的空白

我尝试了以下HTML和CSS

版本1

它还显示空跨距的逗号

.comma:not（：last child）：之后{
内容：“，”；
}

A
B
D

我颠倒了逻辑，将逗号作为

伪元素之前的内容，并且我处理了第一个跨度也可以为空的情况


。逗号：非（：第一个子项）{
左边距：-.3em；
}
.逗号：第一个子项：空~逗号：非（：空）{
左边距：0；
}
.comma:first child:empty~.comma:not（：empty）~.comma:not（：empty）{
左边距：-.3em；
}
.逗号：空{
显示：无；
}
逗号：不（：第一个孩子）：之前{
内容：“，”；
}
.comma:empty+.comma:not（：empty）：before{
内容：“；
}
.comma:not（：empty）~.comma:empty+.comma:not（：empty）：before{
内容：“，”；
}

A.
B
C
D

A.
B
D
A.
B
C
B
C
D
A.
C
D
A.
B
A.
C
A.
D
B
C
B
D
C
D
A.
B
C
D

全部为空：
将其切换。不要在跨距后加逗号，而是在每个跨距前加一个非空的跨距（向后任意距离！）：

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


ABC
.comma~。逗号：不（：空）：在{
内容：“，”；
}
下面的代码应该可以做到这一点，几乎任何组合都可以做到，不隐藏任何内容


。逗号：在{
内容:",
}
.comma:empty:before，
.逗号：类型的第一个：before，
.逗号：类型+的第一个。逗号：空：之前，
.comma:empty+.comma:not（：类型的最后一个）：before，
.comma:empty+.comma:empty:before{
内容：''；
}
首先缺少
项目
项目
项目
最后失踪
项目
项目
项目
缺少前两个
项目
项目
错过最后两个
项目
项目
中间缺失
项目
项目
项目
缺少中间的两个
项目
项目
您到底需要什么格式的A、B、C、D？您的第二种解决方案在小提琴上似乎很适合我？哦，不，等等，它不行。这行吗？谢谢大家的努力，@FabrizioCalderan的答案看起来是目前最有希望的。很好，但是你作弊了，你隐藏了空的；）嗯
：empty
受IE9支持，因此它似乎是合法的：d这确实假设第一个跨度不是空的，对吗？这是因为最后一个子元素用于选择父元素的最后一个子元素。它不能用于选择给定父元素下具有特定类的最后一个子元素。谢谢，这看起来是我认为最有希望的，我很快会测试它。这留下了丑陋的空间。结合法布里齐奥的
左边距：-.3em应该可以做到这一点。@Jackhardcastle如果html标记（）之间没有空格，则不能。这就是HTML的方式。所有元素都在一行上的原因是，在每个跨距（nl字符所在的位置）后面都添加了一个空格。这是干净的，但在最后两个元素被删除时会出现一个额外的逗号empty@FabrizioCalderan-参见修订版和用例-修订后的规则通过了每个步骤，但。。。几乎：如果你只有D，还会出现一个额外的逗号。干得好。
<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: ", ";
}