.selector {
text-decoration: underline;
display: inline-block;
max-width: 100%;
word-wrap: break-word;
}
以上代码中,通过设置display属性为inline-block,使横线拥有了block元素的宽度和高度特性,同时又保留了inline元素在行内排版的特性。
接着,通过max-width属性设置最大宽度为100%,可以让横线随着父元素的宽度自适应变化,避免超出容器而破坏页面布局。
最后,使用word-wrap属性实现自动换行,在遇到长单词或URL时,自动将其拆分成多行,保证横线能够顺利换行。
以上是一种简单、实用的CSS横线自动换行样式实现方法,可以帮助你更好地管理页面排版。