多行文本高亮背景不能直接用 background-color + padding，因为 span 等行内元素的 padding-top/padding-bottom 默认不撑开行框，背景在换行处断裂；需用 box-decoration-break: clone 或 inline-block 拆行模拟。
多行文本高亮背景为什么不能直接用 background-color + padding？
因为 span 等行内元素的 padding 在垂直方向（padding-top/padding-bottom）**默认不生效**，且背景不会包裹换行后的全部行框。直接加 padding 只会让首尾行看起来“撑开”，中间换行处背景断裂、上下留白不一致。
用 box-decoration-break: clone 修复断行背景
这是最接近“原生支持”的方案，让每行文本都独立渲染 padding 和 background，避免背景被截断或错位。
- 必须搭配
display: inline或inline-block使用（不能是 block） - 仅在支持该属性的浏览器中有效（Chrome 59+、Firefox 66+、Safari 15.4+；Edge 基于 Chromium 后也支持）
- 需显式设置
line-height，否则上下 padding 可能重叠或过紧
.highlight {
background-color: #ffeb3b;
padding: 0.2em 0.4em;
line-height: 1.5;
box-decoration-break: clone;
/* Safari 需额外前缀 */
-webkit-box-decoration-break: clone;
}兼容旧浏览器：用 display: inline-block + line-height 模拟
当目标环境包含 IE 或老版 Safari 时，box-decoration-break 不可用，得退而求其次——把每行文本包裹进独立的 inline-block 元素中，再统一控制尺寸。
- 需要 JS 拆分文本并包裹（例如按
\n或自动换行位置），或服务端预处理 - 更稳妥的做法是改用
display: table-cell或inline-flex，但会引入新布局约束 - 注意：
vertical-align: top必须设置，否则多行之间可能因基线对齐产生意外间隙
.highlight-line {
display: inline-block;
background-color: #ffeb3b;
padding: 0.2em 0.4em;
line-height: 1.5;
vertical-align: top;
}
background-clip 和 background-origin 不解决根本问题
有人尝试用 background-clip: padding-box 或 background-origin: content-box 调整背景绘制范围，但这只影响“背景画在哪”，**不改变行框的生成逻辑**。多行文本仍共用一个行框容器，padding 无法跨行生效，背景依然会在换行处断开。
立即学习“前端免费学习笔记（深入）”；
真正卡点在于 CSS 行内格式化上下文（IFC）对 padding 的限制，不是背景裁剪能绕过的。别在这两个属性上浪费调试时间。
实际项目中，优先检查浏览器支持范围；若需全兼容，就接受 JS 辅助拆行这个成本——毕竟视觉一致性比“纯 CSS”更重要。
