Safari 和背景剪辑：文本在多行显示中无法正常工作：内联文本元素

Question

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

background-clip: text

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

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

使用 Firefox 或 Chrome 然后使用 Safari 对其进行测试：您会注意到多行文本不会正确剪切背景渐变。

预期结果：

苹果浏览器：

任何帮助将非常感激 ：）

Answer 1

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

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

MDN 上的 box-decoration-break 属性

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>