多行CSS渐变文字不起作用

Question

我正在为WordPress编写主题，并且正在使用Webkit文本渐变来获取链接。它到目前为止工作，但只要链接环绕到下一行，只有链接的上半部分可见。

示例代码：

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

示例的JSFiddle：https://jsfiddle.net/6ap3j5o5/2/

上面的图片显示在我的浏览器中（Chrome 43.0.2357.37 beta-m）。我用光标选择了最后两行，表明它们确实存在并且没有被DIV切断

我该怎么做才能解决这个问题？

Answer 1

要解决此问题，您可以将<a>链接设为inline-block或block级别。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;