Page 149 - css揭秘

则不一定）。在理想情况下，我们希望能够告诉浏览器“只在后面还跟着一
个 <dd> 的 <dd> 尾部插入逗号”，但我们又一次遇上了那个限制，眼下的
CSS 选择符还表达不出这种需求。因此，我们再次调整思路，在每个前面有
<dd> 的 <dd> 头部插入逗号。最终 CSS 代码会变成（可以在图 5-7 中看到代
码的效果）：

dd + dt::before {
content: '\A';
white-space: pre;
}

dd + dd::before {
content: ', ';
font-weight: normal;
}

图 5-7
最终效果

千万要记住，如果你的结构代码在多个连续的 <dd> 之间包含了（未加
注释的）空白符，那么逗号前面会有一个空格。有很多方法可以修复这个问
题，但都不够完美。其中一种方法是利用负外边距：

dd + dd::before {
content: ', ';
margin-left: -.25em;
font-weight: normal;
}

这个方法可行，但不够可靠。如果你的内容是以不一样的字体和尺寸来
显示的，这个空隙的宽度就不一定刚好是 0.25em。在这种情况下，结果看
起来就不那么理想了。不过对绝大多数字体来说，这种误差基本上是可以忽
略的。

试一试 play.csssecrets.io/line-breaks

118 第 5 章 字体排印

඀ࠡ JOEC