CSS override line-height su word wrap

Question

Ho una lista di collegamenti legati a una casella abbastanza stretta; abbastanza stretto per alcuni collegamenti da avvolgere.

line-height è impostato su 30px, che va bene per i collegamenti non-wrapped; tuttavia, per un collegamento il cui testo è abbastanza lungo da forzare un ritorno a capo, viene applicato anche l'altezza di una riga di 30 pixel, così da apparire come se ci fossero 2 collegamenti e non solo una continuazione del testo del collegamento.

Mi piacerebbe in qualche modo (senza js o sul middleware calcolare la lunghezza della stringa) per ottenere il testo del collegamento spostato con un'altezza di riga pari a 10px o così per dare un'impressione visiva di continuazione e non separazione.

Answer 1

Line-height dovrebbe impostare la spaziatura tra le righe (in particolare, quando si avvolgono). Quello che stai probabilmente cercando è margin sull'oggetto li. Se imposti il ​​valore line-height sul valore inferiore desiderato quando le linee si avvolgono e si imposta margin sul valore desiderato tra gli elementi, è consigliabile procedere.

vedere se questo fa ciò che si vuole:

li { 
    padding: 10px 0 0 0; 
    margin: 30px 0; 
    line-height: 10px; 
} 

Answer 2

lo farei this way

li { 
    list-style-position: inside; 
    margin: 20px; 
} 

ul { 
    width: 200px; 
    border: solid 1px; 
} 

Oppure si potrebbe impostare la "prima linea" elemento pseudo come in this example

li { 
    padding: 10px 0 0 0; 
    margin: 10px; 
    line-height: 30px; 
} 
li:first-line { 
    margin: 10px; 
    line-height: 10px; 
} 
ul { 
    width: 200px; 
}