Page 147 - css揭秘

<!-- 如果你这样写，天崩地裂万劫不复 --> HTML
<dt>Name:</dt>
<dd>Lea Verou<br /></dd>
...

然后，对所有的 <dt> 和 <dd> 元素应用 display:inline; 样式，基本
上就大功告成了。当然，这种方法不仅在可维护性方面是一种糟糕的实践，
而且污染了结构层的代码。只要能使用生成性内容来添加换行，并以此取代
<br> 元素，那么问题就可以解决了！但这好像做不到，对吧？又或者，这
其实可行的？
①
实际上，有一个 Unicode 字符是专门代表换行符的：0x000A 。在 CSS 中，
这个字符可以写作 "\000A"，或简化为 "\A"。我们可以用它来作为 ::after
伪元素的内容，并将其添加到每个 <dd> 元素的尾部，代码如下所示：

dd::after {
content: "\A";
}

这段代码看起来是可以奏效的，但如果我们亲手试一试，就会发现结
果令人失望：跟图 5-5 相比没有任何变化。不过，这并不表示我们的思路
不对，只是表示我们还忽略了什么。这段 CSS 代码所做的其实只相当于在
HTML 结构中的所有关闭标签 </dd> 之前添加换行符。还记得在 HTML 代
码中输入换行符会发生什么吗？默认情况下，这些换行符会与相邻的其他空
白符进行合并。空白符合并通常是一件非常好的事情，否则我们就得把整个
HTML 文档的源代码整理进一行里面！不过，有时候我们希望保留源代码中
的这些空白符和换行，代码块就是最典型的例子。还记得我们在这种场景下
通常会怎么做吗？我们会用到 white-space: pre;。这里也可以这么做，但
只对伪元素生成的换行符设置这个样式。
我们只有一个换行符，并不用担心有其他空白符被保留下来（因为这
里根本就没有），因此任何 pre 值都可以起作用（pre、pre-line 或 pre-
wrap）。我推荐 pre，因为它的浏览器支持程度最好。把这些思路整理成代码：

dt, dd { display: inline; }

dd {
margin: 0;
font-weight: bold;
}

dd::after {
content: "\A";

① 从技术上来说，0x000A 相当于“换行”字符，也就是我们在 JavaScript 中常写的 "\n"。另
外还有一个“回车”字符（即 JavaScript 中的 "\r"，CSS 中的 "\D"），不过我们在现代浏览
器中已经不需要用到这个字符了。

116
第 5 章 字体排印

඀ࠡ JOEC