多行CSS渐变文本无法正常工作

Question

我正在为WordPress编写主题，并使用Webkit文本渐变来制作链接。目前它可以工作，但是一旦链接换行到下一行，只有链接的上半部分可见。

示例代码：

#page a:link {
  background: -webkit-repeating-linear-gradient(top, #cade43, #8a953e) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: bold;
}
#page {
    background: black;
    width: 100px;
}

<div id="page">
    <a href="#">This is a long link that stretches over two lines</a>
</div>

这里是示例的JSFiddle链接：https://jsfiddle.net/6ap3j5o5/2/

上图是出现在我浏览器中的内容（Chrome 43.0.2357.37 beta-m）。我用光标选中最后两行以展示它们并没有被DIV切断。

我应该怎么做来解决这个问题呢？

- Grayda

Answer 1

作为一种解决方法，您可以将链接 <a> 的属性设置为 inline-block 或 block 级别。

#page a:link {
  background: -webkit-repeating-linear-gradient(top, #cade43, #8a953e) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: bold;
  display: inline-block; /*or block*/
}
#page {
    background: black;
    width: 100px;
}

<div id="page">
    <a href="#">This is a long link that stretches over two lines</a>
</div>

- Stickers