Eliminare la distanza tra le righe di testo

Question

Quando si aumenta l'altezza della linea di un elemento, si inizia a ottenere spazi vuoti tra ogni riga di testo. Il più delle volte va bene, dal momento che non vedi il divario specifico.

Ma è problematico quando si dispone di una colonna stretta, con un collegamento che viene eseguito su più righe. Se sposti il ​​mouse sopra il link, c'è un piccolo spazio tra le linee che fa lampeggiare l'effetto hover del link.

Da un punto di vista di progettazione/usabilità, ritengo che ciò costituisca un'esperienza utente negativa (a nessuno piace il flashing casuale). Provare con questo:

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.

posso aggiungere un po 'di imbottitura per i collegamenti per evitare che ciò accada, in alcuni casi, ma non funziona quando il testo è più grande; Ho bisogno di più imbottiture. Qualcuno ha idee per soluzioni?

Answer 1

Provare a risolvere il problema di lampeggiamento impostando il display: blocco per l'elemento <a> in quella colonna stretta.

Answer 2

Se si conosce il punto di inizio e la fine di ogni linea si potrebbe mettere un arco tondo ogni riga, e trasformarlo in un blocco in linea

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

Answer 3

Usare unità relative per impostare l'imbottitura.

L'aggiunta di padding: 0.2ex 0; background: red; utilizzando Firebug/Dragonfly al collegamento di esempio nella domanda funziona perfettamente per me, indipendentemente dalle dimensioni del carattere (impostate tramite CSS o ingrandendo).

L'unico problema con la modifica della dimensione del font in Firefox è che lo sfondo inizia a sovrapporsi alla riga precedente; ma questo è un problema line-height.