Safari 和背景剪辑：文本在多行显示中效果不佳：内联文本元素答案

【问题标题】：Safari and background-clip: text not working well on multiple lines of display:inline text elementSafari 和背景剪辑：文本在多行显示中效果不佳：内联文本元素
【发布时间】：2020-09-13 10:58:51
【问题描述】：

我不知道为什么，但是当我设置时

background-clip: text

要剪切带有文本的渐变/图像/任何内容（显示：内联），只有 Safari 无法正常工作。

我用这个问题重新创建了一支笔：https://codepen.io/steexd/details/qBZVbWY

先用 Firefox 或 Chrome 再用 Safari 进行测试：您会注意到多行文本无法正确剪切背景渐变。

预期结果：

Safari：

任何帮助将不胜感激:)

【问题讨论】：

标签： html css safari

【解决方案1】：

你可以加-webkit-box-decoration-break: clone;

它会使文本清晰易读，但它并不完全符合您的要求，因为它会在每一行上重复渐变。

box-decoration-break property on MDN

h1 {
  max-width:120px;
}
span {
  background-image: -webkit-linear-gradient(right, red, pink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; 
}

<div>
   <h1>Hi, i'm a text with a <span>long span gradient</span>.</h1>
</div>

【讨论】：