css下划线自动换行

在网页开发中，下划线是很普遍的一种设计元素，它可以用来强调重点内容、分割信息等等。但是，当下划线太长时，会影响页面布局甚至使文本溢出，这时候我们就需要使用CSS来解决这一问题。

对于单个的下划线，我们可以使用text-decoration属性来实现：

 .underline {
     text-decoration: underline;
   } 

而对于过长的下划线，我们需要使用border-bottom属性来代替text-decoration。同时，我们需要使得下划线自动换行，以防止它溢出页面。这里我们可以用到word-break属性，它的值可以是'break-all'或者'break-word'，分别代表单词过长自动折行，或者单词内部溢出时才折行。

.underline {
  display: inline-block; /*必须要加*/
  border-bottom: 1px solid black;
  word-break: break-all;
} 

最后，需要注意的是，border-bottom属性会占用下划线底部一定的高度，所以我们需要在给它添加边框之前，先将line-height设置为小于1px的值：

p {
   line-height: 0.9;
}

.underline {
  display: inline-block; /*必须要加*/
  border-bottom: 1px solid black;
  word-break: break-all;
} 

这样就可以实现下划线自动换行的效果啦！