css揭秘 – 字体排印（一）

这是我参与更文挑战的第9天，活动详情查看： 更文挑战

连字符断行

难题

text-align: justify 可以使段落中的文字两端对齐，但是对于英文来说，如果要断句的正好是一个长的单词，那么它就会去到下一行，在上一行看到的单词间距就会比较大，并不美观。因此，有没有一种方法可以使单词使用连字符切换到下一行呢？

解决方案

css3 引入了一个新的属性 hyphens。它接受三个值：none、manual、auto。 manual 是它的初始值，可以在任何时候手工插入软连字符实现断词折行的功能。none 会禁用这种行为；很神奇的是：hyphens: auto 即可实现上述需要的效果。

插入换行

难题

通过 css 插入换行通常与定义列表有关，但有时候也会涉及其他场景。举例来说，考虑以下这段代码：

<dl>
    <dt>Name:</dt>
    <dd>Lea Verou</dd>
    <dt>Email:</dt>
    <dd>lea@verou.me</dd>
    <dt>Location:</dt>
    <dd>Earth</dd>
</dl>
复制代码

希望展示的效果如下图1所示，因此添加一些样式，但是 dt、dd 都是块级元素，因此展示的是如下图2所示的效果，于是大家添加 display: inline-block 最终又会得到如下图3的效果。

那么是否有一种方法可以实现最终的效果呢？

解决方案

其实，要做的是在 dd 后面添加一个换行，如果使用手动的 <br/> 的话，不仅在代码的可维护性方面是很糟糕，而且还污染了代码的层次结构。有一个 Unicode 字符专门代表换行符的：0x000A，在css中这个字符写作”\000A”，或者简写为”\A”，因此可以用它来作为 ::after 伪元素的内容，并将其添加到 dd 的尾部。

dd::after{ content: "\A" }
复制代码

尝试一下，发现并没有什么变化。这段 css 代码相当于在 HTML 结构中的所有关闭标签 </dd> 之前添加换行符。但是在 HTML 中默认情况下，输入换行符会跟相邻的其他空白符进行合并。使用 white-space: pre 即可保留空白符，最终代码如下：

dt, dd { display: inline; }
dd {
    margin: 0;
    font-weight: bold;
}
dd::after {
    content: "\A";
    white-space: pre;
}
复制代码

上述代码看似可以实现想要的效果，但是如果在第二行后面再添加一个邮箱，就会发现新添加的邮箱会自动折到下一行了，说明代码的健壮性还是欠缺点。

dd+dt::before {
    content: '\A';
    white-space: pre;
}
dd+dd::before {
    content: ', ';
    font-weight: normal;
}
复制代码

文本行的斑马条纹

难题

几年前，在刚刚获得 :nth-child() / :nth-of-type() 伪类之后，最常用其来解决的一个需求就是表格的“斑马条纹”。只需要下面代码即可实现表格的“斑马条纹”。

tr:nth-child(even) {
    background: rgba(0,0,0,.2);
}
复制代码

但是如果将其应用到文本行中还是有些力不从心。不得不将文本包裹在一个个 div 中再使用伪类去实现。那么，有没有一种方案可以应用在文本行中呢？

解决方案

可以对整个元素设置统一的背景图像，一次性加上所有的斑马条纹。在 CSS 中用渐变直接生成背景图像，而且可以用 em 单位来设定背景尺寸，这样背景就可以自动适应 font-size 的变化了。

<style>
pre{
    padding: .5em;
    line-height: 1.5;
    background: hsl(20, 50%, 95%);
    background-image: linear-gradient(rgba(120, 0, 0, .1) 50%, transparent 0);
    background-size: auto 3em;
    background-origin: content-box;
    font-family: Consolas, Monaco, monospace;
}
</style>
<pre>
    <code>
        while (true) {
            var d = new Date();
            if (d.getDate()==1 &amp;&amp;
                d.getMonth()==3) {
                alert("TROLOLOL");
            }
        }
    </code>
</pre>
复制代码

调整tab的宽度

难题

通常使用 <pre> 和 <code> 元素来显示代码，它们具有浏览器所赋予的默认样式。这些默认样式往往是：

pre, code {
    font-family: monospace;
}
pre {
    display: block;
    margin: 1em 0;
    white-space: pre; 
}
复制代码

默认的样式远不足以解决代码展示遇到的种种问题。尽管用 tab 非常合适来展示代码，但是人们通常不会使用 tab，因为 tab 在浏览器上会显示 8 个字符，这对于展示来说既难看而且又是非常浪费空间的。

解决方案

css3 中提供一个新的 css 属性 tab-size 可以控制这个情况，它可以接受一个数字（表示字符数）或者一个长度值（不经常使用），我们通常把它设置为 4 或者 2（2 更为普遍）。

pre{ tab-size:2; }
复制代码

最后说一句

如果这篇文章对您有所帮助，或者有所启发的话，帮忙关注一下，您的支持是我坚持写作最大的动力，多谢支持。