Eliminar espacio entre líneas de texto

Cuando aumenta la altura de línea de un elemento, comienza a obtener espacios entre cada línea de texto. La mayoría de las veces esto está bien, ya que no ves la brecha específica.Eliminar espacio entre líneas de texto

Pero es problemático cuando tienes una columna estrecha, con un enlace que se ejecuta en varias líneas. Si mueve el mouse sobre el enlace, hay un pequeño espacio entre las líneas, lo que hace que el efecto de desplazamiento del enlace se active y desactive.

Desde una perspectiva de diseño/usabilidad, creo que esto hace que la experiencia del usuario sea mala (a nadie le gusta el flasheo al azar). Prueba con esto:

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.

que puede añadir un poco de relleno para enlaces a impedir que esto suceda en algunos casos, pero no funciona cuando el texto es más grande; Necesito más relleno. ¿Alguien tiene ideas para soluciones?

Fuente

2009-04-10 DisgruntledGoat

¿Qué quiere decir exactamente con "pero no funciona cuando el texto es más grande, necesito más relleno"? ¿Puede dar un ejemplo? ¿No es correcto usar unidades relativas para el relleno? – mercator

Probablemente puedas probarlo usando Firebug con el enlace de arriba (ahora corregido). Si agrega un fondo al enlace, verá la brecha. Ahora aumenta el relleno, la brecha desaparece. Ahora aumente el tamaño de la fuente, la brecha aparece nuevamente. Entonces, el relleno funciona a veces pero no es confiable. – DisgruntledGoat

Intente solucionar su problema de parpadeo configurando display: block para su elemento <a> en esa columna estrecha.

Fuente

2009-04-10 21:27:18

No es una solución terrible. El problema en este caso es que el efecto de desplazamiento aparece cuando el mouse está en el "cuadro generado" pero no en realidad sobre el enlace (es decir, a la derecha de la línea). – DisgruntledGoat

Si conoce el punto de cada línea de salida y al final se puede poner un lapso de alrededor de cada línea, y convertirlo en un bloque de línea

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

Fuente

2009-04-11 00:22:40 wheresrhys

No estoy seguro de si esto es deliberado, pero en un lapso de {} no mostraría la segunda pantalla: inline-block anula el -moz-inline-block? –

sí, lo haría. está en ese orden porque ffx 2 no es compatible con Inline-Block, por lo que necesita el hack, pero ffx 3 sí lo admite, por lo que al poner inline-block al final se asegura de que se aplique – wheresrhys

Use unidades relativas para establecer el relleno.

Agregando padding: 0.2ex 0; background: red; usando Firebug/Dragonfly al enlace de ejemplo en la pregunta funciona bien para mí, cualquiera que sea el tamaño de fuente (establecido a través de CSS o acercar).

El único problema para cambiar el tamaño de fuente en Firefox es que el fondo comienza a superponerse a la línea anterior; pero eso es un problema line-height.

Fuente

2009-04-14 12:00:02 mercator

Eliminar espacio entre líneas de texto

Respuesta

Cuestiones relacionadas