使用 box-decoration-break: clone 可解决多行内联元素（如 ）在换行时圆角中断的问题，确保整个文本块拥有统一、连贯的圆角边框与背景。
使用 `box-decoration-break: clone` 可解决多行内联元素（如 ``）在换行时圆角中断的问题，确保整个文本块拥有统一、连贯的圆角边框与背景。
在 CSS 中，当对 这类内联元素设置 border-radius 和 padding 时，若文本因容器宽度限制而自动换行，浏览器默认会将每行视为独立的渲染片段——导致圆角被“切开”，首尾行出现直角或半圆角，破坏整体视觉一致性。这正是用户在 CodePen 示例中遇到的核心问题：绿色高亮块本应呈现流畅的胶囊状（全圆角），却在换行处断裂成多个带棱角的矩形段。
解决方案：启用 box-decoration-break: clone
该 CSS 属性专门用于控制碎片化渲染（如换行、分页、断行）时装饰属性（border、padding、border-radius、background 等）的继承方式。clone 值表示：每一碎片都完整复制原始盒子的所有装饰样式，而非按默认的 slice 模式（仅保留局部边框/圆角）。这样，每行 片段都会拥有完整的 50px 圆角和 7px 内边距，视觉上无缝衔接，形成真正连续的圆角背景条。
✅ 正确写法（含兼容性前缀）：
p span {
padding: 7px;
line-height: 35px;
background-color: #28a745; /* 推荐使用更规范的绿色 */
color: #ffffff;
border-radius: 50px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone; /* Safari、旧版 Chrome/Edge 必需 */
}
⚠️ 注意事项：
- 浏览器支持：现代 Chrome、Firefox、Safari（15.4+）、Edge 均已原生支持，但 Safari 15.4 之前需 -webkit- 前缀；IE 不支持，需降级处理（如改用 display: inline-block + 单行限制，或 JavaScript 动态包裹）。
- line-height 与 padding 协同：当前 line-height: 35px 高于 padding-top + padding-bottom = 14px，可确保行间垂直居中；若调整 padding，建议同步微调 line-height 以维持视觉节奏。
-
避免滥用：box-decoration-break: clone 适用于强调型文本标记（引用、标签、关键词高亮），不推荐用于大段正文——语义上 应包裹有意义的短文本片段，长段落建议用
或语义化容器配合 ::before 伪元素实现更健壮的“文本标记”效果。
总结：box-decoration-break: clone 是解决内联元素跨行圆角断裂的标准化、声明式方案。添加前缀并验证目标浏览器兼容性后，即可一键获得平滑、专业、无中断的胶囊式文本高亮效果。
