连字符断行
hyphens:auto;
*:需要在HTML的lang属性指定支持的语言
**:chrome尚未支持
*:与word-wrap: break-word结合使用
插入换行
dt,dd{
display: inline;
}
dd{
margin: 0;
font-weight: bold;
}
dd+dt::before{//避免首个dt前面也加入空行
content: '\A';//换行符
white-space: pre;
}
dd+dd::before{//
content:',';
font-weight: normal;
margin-left: -0.25em;//避免逗号前面的空格,不一定为-.25em
}
<dl>
<dt>Name:</dt>
<dd>Lea Verou</dd>
<dt>Email:</dt>
<dd>lea@verou.me</dd>
<dd>leaverou@mit.edu</dd>
<dt>Location:</dt>
<dd>Earth</dd>
</dl>
文本行的斑马条纹
.testdiv{
white-space: pre;
padding: .5em;
background: #fb3;
line-height: 1.5em;
background-image: linear-gradient(yellowgreen 50%, transparent 0);
background-size: auto 3em;
background-origin: content-box;
}
调整tab的宽度
tab-size:4;
连字
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
华丽的&符号
......
自定义下划线
......
现实中的文字效果
发光字效果
.testdiv{
background: #203;
color: #ffc;
text-shadow: 0 0 .1em, 0 0 .3em;
}
*:text-shadow: h-shadow v-shadow blur color;
环形文字
......