带背景渐变与全边内边距的多行行内文本实现方案咨询

要实现行内文本换行时保留全方向内边距、渐变背景逐行完整渲染，核心是使用box-decoration-break: clone属性，该属性会让换行的行内元素每一行都独立应用完整的盒样式，无需依赖box-shadow方案，完美适配渐变背景需求。

实现代码 #

.gradient-inline-text h1 {
    display: inline;
    /* 四个方向内边距可按需求调整 */
    padding: 5px 10px;
    /* 渐变背景按需求正常定义即可 */
    background: linear-gradient(#0095DB, #00509F);
    color: white;
    font-family: sans-serif;
    font-size: 40px;
    /* 行高建议设置为足够容纳上下padding的值，避免行与行之间背景重叠 */
    line-height: 1.8em;
    /* 核心属性，加前缀兼容webkit内核浏览器 */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

<div class="gradient-inline-text">
  <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</h1>
</div>

效果说明 #

• 文本自动换行时，每一行的左右两侧都会保留设定的padding，不会出现换行处缺内边距的问题
• 渐变背景会在每一行完整渲染，符合需求效果
• 代码无额外hack，兼容Chrome、Firefox、Safari、Edge等所有主流浏览器

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