[分享]css3文字换行下划线

CSS3中有很多新的特性，比如文字换行和下划线就是其中之一。

 text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden; 

以上代码可以实现当文字溢出容器时，用省略号代替溢出部分；不允许文字换行；超出部分隐藏。

 text-decoration: underline;
   text-decoration-color: red;
   text-decoration-style: wavy;
   text-decoration-thickness: 2px; 

以上代码可以实现下划线效果，并且可以设置下划线的颜色、样式、粗细。

而文字换行和下划线也可以结合起来使用。例如下面这段代码：

 text-decoration: underline;
   text-underline-offset: 5px;
   text-decoration-color: red;
   text-decoration-style: wavy;
   white-space: pre-wrap;
   word-wrap: break-word; 

以上代码可以实现下划线和文字换行并存的效果，下划线与文字之间的距离为5px，下划线的颜色为红色，样式为波浪线，同时允许文字自动换行。

CSS3的文字换行和下划线特性可以给网页带来更加丰富的视觉效果，让用户感受到更加舒适、自然的阅读体验。