CODEWITHSUNDEEP
htmlcsswebkit
Grayda
Grayda

Reputation: 2150

Multi-line CSS gradient text not working

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/

JSFiddle Example. Bottom two lines selected to show they do exist

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?

Upvotes: 3

Views: 3241

Answers (1)

Stickers
Stickers

Reputation: 78676

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>

Upvotes: 7

Related Questions