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>
Comments
Post a Comment