Cómo establecer la altura del elemento para un número fijo de líneas de texto

Question

Dado un texto que ocupa unas 10 filas, ¿cómo puedo cambiar el tamaño de su contenedor para mostrar solo las primeras 3 filas y ocultar las demás? Al parecer, esto funciona, pero creo que no es confiable:

.container { 
    height: 7.5ex; /* 2.5ex for each visible line */ 
    overflow: hidden; 
} 

¿Puedo confiar en el hecho de que height of one row = 2.5ex o es sólo una coincidencia en los navegadores que estoy usando para probar?

Answer 1

Si se van a utilizar este debe garantizar la line-height es siempre 2.5ex

.container { 
    line-height: 2.5ex; 
    height: 7.5ex; /* 2.5ex for each visible line */ 
    overflow: hidden; 
} 

Demo

Answer 2

La unidad ex es la fuente altura de la x (altura de su carácter x). No usaría esto aquí. Deberías usar la unidad em. Esta es la altura real de la fuente. La altura de fuente se define estableciendo la propiedad de altura de línea. Por lo tanto:

.container { 
    height: 3em; /* 1em for each visible line */ 
    overflow: hidden; 
} 

Aquí hay más información sobre las unidades de longitud CSS: http://www.w3.org/TR/CSS21/syndata.html#length-units

Answer 3

puede ajustar la altura de la línea de un texto y con él conoce la altura exacta de cada fila y se obtenga la altura deseada de su contenedor , sólo tiene que hacer esto:

.container { 
    line-height:25px; 
    height:75px; 
    overflow:hidden; 
} 

Ahora todo funciona correctamente :)

Answer 4

puede utilizar la propiedad webkit-line pinza

.container { 
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
} 

No funciona en todos los navegadores, pero espero que un día.