Multi-line CSS gradient text not working

Question

I'm writing a theme for WordPress and am making use of Webkit text gradients for links. It's working so far, but as soon as the link wraps around to the next line, only the top half of the link is visible.

Example code:

#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 of the example: https://jsfiddle.net/6ap3j5o5/2/

The image above is what appears in my browser (Chrome 43.0.2357.37 beta-m). I've selected the last two lines with the cursor to show that they do exist and aren't cut off by the DIV

What can I do to fix this?

Answer 1

As a workaround, you could make the link <a> as inline-block or block level.

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