我正在为 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 切断
我该怎么做才能解决这个问题?
最佳答案
作为解决方法,您可以创建链接 <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>
关于html - 多行 CSS 渐变文本不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29866985/