连字符断行
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;
环形文字
......