如何实现多行换行的内联文本效果并保留内边距

要实现单元素内每行文本被背景色包裹、同时保留四周内边距的效果，你之前用display: inline的问题在于：inline元素的上下内边距不会占据行高空间，且默认背景不会在换行时拆分包裹每行。可以通过以下CSS组合实现需求：

完整代码示例 #

HTML #

<h1 class="main-title">improving tech business planning</h1>

CSS #

body {
  background: black;
  margin: 2rem;
  font-family: sans-serif;
}

.main-title {
  background: white;
  display: inline;
  padding: 0.5rem 1rem; /* 控制文本与背景的间距 */
  line-height: 2.5; /* 撑开行高，避免上下内边距和其他行重叠 */
  box-decoration-break: clone; /* 核心：让背景/内边距在换行时复制到每行 */
  /* 兼容旧版webkit浏览器 */
  -webkit-box-decoration-break: clone;
}

关键属性解释 #

• display: inline：让元素跟随文本的换行逻辑，仅占据文本实际宽度
• box-decoration-break: clone：强制元素的背景、内边距等装饰效果，在文本换行时拆分并应用到每一行上，这是实现每行背景包裹的核心
• line-height：由于inline元素的上下padding不会自动增加行高，必须手动设置足够的行高，防止相邻行的背景和文本重叠
• padding：按需调整数值，控制文本四周的空白区域

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