CSS anula la altura de línea en el ajuste de palabra

Question

Tengo una lista de enlaces vinculados a un cuadro bastante angosto; lo suficientemente estrecha como para que algunos enlaces se envuelvan.

línea-altura se establece en 30px, lo que está bien para los enlaces no envueltos; sin embargo, para un enlace cuyo texto es lo suficientemente largo como para forzar un ajuste de línea, también se aplica una altura de línea de 30 píxeles, lo que hace que parezca que hay dos enlaces y no solo una continuación del texto del enlace.

Me gustaría de alguna manera (sin js o en el extremo del middleware calcular la longitud de la cadena) para que el texto del enlace envuelto tenga una altura de línea de 10px aproximadamente para dar una impresión visual de continuación y no separación.

Answer 1

Line-height se supone que debe establecer el espaciado entre líneas (particularmente, cuando se envuelven). Lo que probablemente esté buscando es margin en el objeto li. Si configura el line-height en el valor más pequeño que desea cuando las líneas se ajustan y establece el margin en el valor que desea entre los elementos, debería estar listo.

ver si esto hace lo que quiere:

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

Answer 2

lo haría this way

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

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

O se podría establecer la "primera línea" pseudo elemento como en this example

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