Eliminate gap between lines of text

Question

When you increase the line-height of an element, you start getting gaps between each line of text. Most of the time this is fine, since you don't see the specific gap.

But it is problematic when you have a narrow column, with a link that runs over multiple lines. If you move your mouse over the link, there is a small gap between the lines, which makes the link hover effect flash on and off.

From a design/usability perspective, I feel this makes for a bad user experience (no one likes random flashing). Try it with this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est. Nunc aliquam, eros a aliquam consequat, ante diam rutrum risus, et dignissim ligula turpis et ante. Maecenas leo neque, euismod in, aliquam et, molestie ac, ligula. Integer venenatis. Pellentesque enim. Maecenas aliquet, tortor at molestie sodales, urna velit pulvinar lorem, ac malesuada nibh turpis eu tortor.

I can add some padding to links to prevent this happening in some cases, but it doesn't work when text is larger; I need more padding. Anyone have ideas for solutions?

Answer 1

Try fixing your flashing problem by setting display:block for your <a> element in that narrow column.

Answer 2

If you know the start and end point of each line you could put a span round each line, and turn it into an inline block

#wrap {font-size:14px; line-height:16px;}
a span{display:-moz-inline-block; display:inline-block;line-height:14px;padding:1px 0;}
a:hover {background:red;}

<div id="wrap">
dsvlaksvh; asvj asdfh;dhldv hd d dl h dfhd d dfh; daljfda k;d <a href="#" >
<span>hdv </span><span>dvh ldvhldf dhk </span><span>;dhkdf hdl hdfk 
</span><span>dfhkldf h vkhg j</span></a> glj gj f gjl fjl fj f
    </div>