override inline styles with css




CSS anula la altura de línea en ajuste de palabra (2)

Lo haria asi

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

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

En

O puede configurar el pseudo-elemento de "primera línea" como en este ejemplo

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

Tengo una lista de enlaces enlazados a un cuadro bastante estrecho; Lo suficientemente estrecho para que algunos enlaces se envuelvan.

line-height 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 30px, lo que hace que parezca que hay 2 enlaces y no solo una continuación del texto del enlace.

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


Se supone que la Line-height establece el espaciado entre líneas (particularmente, cuando se ajustan). Lo que probablemente estás buscando es margin en el objeto li . Si establece la 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.

Mira si esto hace lo que quieres:

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