目录：1、连字符断行2、插入换行3、自定义下划线4、非凡的文字效果1、连字符换行
问题形容：咱们在展现段落文本的时候，常常须要用到两端对齐的性能，但其有一个致命的缺点，那就是它会主动调整字符的间距，使得单词不会主动的换行，如下所示。
其视觉效果就十分蹩脚，所以须要一个办法在正确的中央断开单词，让单词在遇到换行的时候能主动拆分，也就是所谓的连字符换行，一行代码就能实现；hyphens: auto;
2、插入换行
问题形容：当咱们须要手动插入换行的时候，首先想到的是<br/>标签，有无方法在不应用新标签的前提下实现灵便的插入换行的性能呢？
实际上应用伪类元素是最好的抉择，将伪类元素的content设置为'\A'或'0x000A'能实现换行，然而默认状况下插入的换行符会和左近的空白符进行合并，这就须要咱们手动的保留文档中的换行符；
dd::after { content: '\A'; white-space: pre;}通过这种形式就能不增加新的标签，就在已有标签前面增加换行。然而要留神一点，如果在dd标签伪类增加换行，那么前面所有的dd标签都会受到影响，所以能够通过父子标签或兄弟标签限度受影响的dd标签，如：
dt > dd::after { content: '\A'; white-space: pre;}3、自定义下划线
问题形容：失常的下划线成果通过text-decoration：underline实现，其款式是固定的，有时无奈满足视觉需要，有其余办法能够代替实现下划线成果嘛？
最容易想到的办法就是用边框来模仿下划线，边框能够实现宽度和色彩，更加灵便多变。
a { text-decoration: none; border-bottom: 1px solid gray;}
然而这样的形式存在着几个问题，首先就是如何管制下划线和文字之间的间隙，咱们能够把盒子的display设置为inline-block，而后设置line-height来管制下划线和文字的间隔，让文字更贴近下划线。
这又衍生出另外的问题，如果带下划线的文字换行，会造成以下成果：
最终的解决方案是依附突变！这是个高级技巧，能够理解以下：
background: linear-gradient(gray, gray) no-repeat;background-size: 100% 1px;background-position: 0 1.15em;4、非凡的文字效果
几种非凡的文字效果的实现，如:凸版印刷、空心字、文字外发光、文字凸起成果
其实就是利用各种暗影成果相结合实现的视觉效果。
（1）文字凸版印刷
background: hsl(210, 13%, 60%);color: hsl(210, 13%, 30%);text-shadow: 0 1px 1px hsla(0,0%,100%,.8);（2）空心字成果
background: deeppink;color: white;text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;（3）文字外发光
background: #203;color: #ffc;text-shadow: 0 0 .1em, 0 0 .3em;（4）文字凸起
background: #58a;color: white;text-shadow: 0 1px hsl(0,0%,85%), 0 2px hsl(0,0%,80%), 0 3px hsl(0,0%,75%), 0 4px hsl(0,0%,70%), 0 5px hsl(0,0%,65%);