html - Multi-line CSS gradient text not working -

i'm writing theme wordpress , making use of webkit text gradients links. it's working far, link wraps around next line, top half of link 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 long link stretches on 2 lines</a>  </div>

jsfiddle of example: https://jsfiddle.net/6ap3j5o5/2/

the image above appears in browser (chrome 43.0.2357.37 beta-m). i've selected last 2 lines cursor show exist , aren't cut off div

what can fix this?

as workaround, make link <a> 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 long link stretches on 2 lines</a>  </div>