Safari和background-clip:文本在多行显示中不能正常显示:内联文本元素

Question

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

background-clip: text

要裁剪带有文本的渐变/图像/任何内容(display: inline)，只有Safari不能正常工作。

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

先用Firefox或Chrome测试，然后再用Safari测试:你会注意到多行文字无法正确裁剪背景渐变。

预期结果：

​

​

Safari：

​

​

如有任何帮助，我们将不胜感激:)

Answer 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>

​