HTML中使用span标签时，如何为换行内容设置完整下边框？

嘿，这个问题我之前也踩过坑！核心原因是<span>属于行内元素，它的border-bottom只会跟着文本内容的范围走，换行后那部分空白区域不属于<span>的内容区域，所以下划线就断了。给你几个实用的解决办法：

方法一：使用box-decoration-break: clone（推荐） #

这个CSS属性能让行内元素的边框、背景等装饰样式在换行时，每一行都单独渲染，相当于把元素拆成多行后各自应用边框。修改你的CSS代码如下：

div > span {
  padding-bottom: 10px;
  border-bottom: 0.5px dashed #b4987e;
  line-height: 48px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* 兼容Chrome、Safari等webkit内核浏览器 */
}

加上这个属性后，换行的每一行底部都会完整显示虚线下划线，包括换行后的空白部分，完美解决你的问题。

方法二：将下划线移到父元素<div>上 #

如果不想用上面的属性，也可以把下划线样式加到父元素<div>上，调整内边距让它和文本对齐：

div {
  padding-bottom: 10px;
  border-bottom: 0.5px dashed #b4987e;
  line-height: 48px;
}
/* 移除span原来的边框样式 */
div > span {
  /* 这里可以保留其他需要的样式 */
}

注意：这个方法会让下划线拉满<div>的整个宽度，如果你的<div>是块级元素占满整行，下划线就会贯穿屏幕，适合需要整行下划线的场景。

方法三：使用原生文本下划线扩展属性（现代浏览器） #

如果你的目标浏览器支持CSS Text Decoration Level 3标准，可以用原生文本下划线来模拟，代码如下：

div > span {
  line-height: 48px;
  text-decoration: underline dashed #b4987e;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 10px; /* 用来代替padding-bottom控制下划线和文本的距离 */
}

这个方法的好处是原生文本下划线，换行时会自动覆盖每一行的文本范围，但要注意兼容性，旧版浏览器可能不支持这些扩展属性。

内容的提问来源于stack exchange，提问作者Hoang