2012-09-10 22 views
26

Tengo una caja en CSS con dimensiones fijas, suficiente para caber en cualquiera de mis textos. No quiero espacio en blanco entre el final del texto y el borde del cuadro inferior. ¿Cómo puedo ponerlos en las cajas? Algo así como expandir la altura de la línea para que encaje.¿Hay algo así como una altura de línea automática?

+0

Este es un div con relleno: 5px; Quiero que todo el texto 'expandido' a 5px hasta el borde. Algunos textos se ajustan bien y otros necesitan dos líneas para llegar al relleno de bordes – dstonek

+0

Veo que también depende del navegador. Safari hace las fuentes más pequeñas que Firefox, por lo que tiene más espacio para llenar. (usando la unidad em) – dstonek

+0

Pienso en obtener la longitud de la cadena del servidor y ajustar la altura de la línea en consecuencia. Dependiendo del tipo de letra'iiiiii 'podría usar menos espacio que' aaaaaa ', pero estadísticamente no hay mucha diferencia en el texto real. JS hace el trabajo de medir la longitud del texto, pero quiero evitarlo aquí. – dstonek

Respuesta

5

Probar vertical-align:bottom.

Si eso no funciona, puede intentar line-height: 1em

Si aún así no hace lo que quiere, tendrá que aclarar lo que estamos tratando de lograr.

+1

La alineación vertical solo mueve el problema del espacio de abajo hacia arriba. Creo que OP quiere que la altura de la línea se ajuste automáticamente para que el espaciado vertical sea igual en todas partes. – sachleen

+0

También debe hacer 'display: table-cell' para la alineación vertical para trabajar en celdas no table o elementos de imagen. – sachleen

+1

@sachleen Solo si el cuadro en cuestión es más pequeño que la altura de línea calculada. Por defecto, la caja se alineará verticalmente con la línea de base, que está ligeramente por encima de la línea inferior. Y 'display: table-cell' alineará verticalmente los * contenidos * del cuadro, no el cuadro en sí. –

-4

Lo sentimos, pero es posible solo con JavaScript.

+2

No, es muy posible con CSS ... – Jon

+1

esto no es posible con solo javascript –

22
line-height: normal; 

Es correcto.

+0

'normal' es el valor predeterminado, esto no debería tener ningún efecto. – nullability

+0

No, es incorrecto. 'line-height: normal;' es relativo al tamaño de letra, no a la altura del elemento circundante. Además, la relación específica de 'normal' a' font-size' difiere de un navegador a otro. –

Cuestiones relacionadas