Geek Answers Handbook

Close the gap between lines of text

When you increase the height of a line of an element, you begin to get the gaps between each line of text. In most cases, this is normal, since you do not see a specific gap.

But this is problematic when you have a narrow column with a link that goes through several rows. If you hover over a link, there will be a small gap between the lines, which is why the hover effect turns on and off.

In terms of design / usability, I feel this creates a bad user experience (no one likes random flashing). Try it:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In the assessment of Nunc aliquam, eros a aliquam ensat, ante diam rutrum risus, et dignissim ligula turpis et ante. Maecenas leo neque, euismod in, aliquam et, molestie ac, ligula. The whole venenatis. Pellentesque enim. Patron of aliket, turtle in diuretic dogs, urna velit pulvinar lorem, ac malesuada nibh turpis eu tortor.

I can add some additions to the links so that this does not happen in some cases, but it does not work when the text is larger; I need more add-ons. Anyone have any ideas for solutions?

+5
source share
3 answers

Try to fix the flashing problem by setting the display: block for your item <a>in this narrow column.

+6

,

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

Use relative units to install the add-on.

Adding padding: 0.2ex 0; background: red;using Firebug / Dragonfly to the sample link in the question is great for me, regardless of font size (using CSS or scaling).

The only problem with changing the font size in Firefox is that the background starts to overlap the previous line; but it is a problem line-height.

0
source

More articles:


All Articles