如何在CSS中为多行文本添加带内边距的高亮背景盒-css教程-PHP中文网

多行文本高亮背景不能直接用 background-color + padding，因为 span 等行内元素的 padding-top/padding-bottom 默认不撑开行框，背景在换行处断裂；需用 box-decoration-break: clone 或 inline-block 拆行模拟。

如何在css中为多行文本添加带内边距的高亮背景盒

多行文本高亮背景为什么不能直接用 `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 元素中，再统一控制尺寸。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

需要 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”更重要。