共计 1449 个字符，预计需要花费 4 分钟才能阅读完成。
目录：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%);