Page 148 - css揭秘

white-space: pre;
}

如果你亲手测试一下，就会发现这个办法真的有效，它的渲染结果与图
5-3 一模一样！不过，这种方法足够健壮吗？假设我们要给定义列表中的这
位用户添加第二个邮箱：

...
<dt>Email:</dt>
<dd>lea@verou.me</dd>
<dd>leaverou@mit.edu</dd>
...

图 5-6
当遇到多个 <dd> 时，我们的解
决方案就不灵了

结果如图 5-6 所示，有些莫名其妙。由于我们在每个 <dd> 的后面都加
了一个换行符，每个值都会被分到单独一行中，甚至在不需要换行的时候也
是如此。如果多个并列的值以逗号分隔并且排在同一行中（假设容器的宽度
足够），就会好得多了。

在理想情况下，我们只想针对 <dt> 之前的最后一个 <dd> 来插入换行，
而不是对所有的 <dd> 都这样做。不过，这对于当前 CSS 选择符的功能来说
还是不可能的，因为选择符无法做到先在 DOM 树中选中主体元素，再倒回
去查询它之前的元素。我们需要换种方式来思考。一个想法就是换行符不用
加在 <dd> 的后面，而是加在 <dt> 的前面：

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

这会导致第一行变为空行，因为选择符对第一个 <dt> 也是生效的。为
了规避这个问题，可以尝试使用以下这些选择符来替代单纯的 dt：

„ dt:not(:first-child)
„ dt ~ dt

„ dd + dt
我们将采用最后一种方案，因为即使是在多个 <dt> 共用同一个值的场
景下，它也是可以正常工作的；而另外两者在这种情况下还是会出问题。有
些时候，我们可能还是需要把多个 <dd> 显式分隔开，除非我们觉得多个
值以空格作为分隔是可以接受的（这种方式在某些时候表现良好，但有时

21 插入换行 117

඀ࠡ JOEC