字体排版

title: 字体排版
date: 2016-10-24
tags: CSS Secrets

0x01 连字符断行

CSS3 添加了一新的属性,hyphens,它有三个值，nome,normal,auto。其作用是我们可以在任何时候手工插入软连字符，来实现断词折行的效果。只需要使用hyphens:auto就可以了。

0x02 插入换行

下面将会使用自定义列表来做一个 Contact 模块。

//HTML 
<div id="contact">
    <dl>
        <dt>Name:</dt>
        <dd>Jack</dd>

        <dt>Email:</dt>
        <dd>onejustone404@gmail.com</dd>
        <dd>0nejust0one@gmail.com</dd>

        <dt>Location:</dt>
        <dd>BeiJing</dd>
    </dl>
</div>

// CSS
dt,dd {
    display: inline;    
    margin:0;
}

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

dd+dt::before {
    /*给每一个 dt 之前有 dd 的 dt 头部添加换行符*/
    content: '\A';
    /* \A 相当于换行符*/
    white-space:pre;
    /*保留源代码中的空白符和换行符*/
}

dd + dd:before {
    /*在每个前面有 dd 的 dd 的头部插入逗号*/
    content: ',';
    margin-left: -0.25em;   
        /*使用负 margin 去除多个连续的 dd 之间的空白符*/
}