--愿你内心有种不灭的火焰,将你与别人区分开来--

0%

字体排版

CSS 字体排版

0x01 连字符断行

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

0x02 插入换行

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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 之间的空白符*/
}