CSS: Overflow ellipsis con varias lineas de texto

Este es un truco que aprendí hace algún tiempo y que me ha hecho lidiar mejor con los diseñadores en varias ocasiones. Se trata de un contenedor con texto que tiene siempre un tamaño fijo, pero el texto no es siempre el mismo. Por ejemplo una versión resumida de la biografía de un usuario, que puede tener entre 10 y 1000 caracteres.

El diseñador quiere que tenga siempre el mismo alto, pero estamos en el año 2015, el mundo se ha movido y la maquetación es responsive, es decir que no entiende de tamaños fijos por muy sencillos que parezcan. Todo es relativo: los altos, los anchos y si se hace bien de verdad, hasta los tamaños de letra. Los numeros sólo sirven para indicar porcentajes o se usan para mantener proporciones, no para indicar tamaños.

Lo ideal es usar text-overflow: ellipspsis; para poner los tres puntos al final del texto resumido y ocultar el resto, pero por defecto sólo permite aplicarlo a una linea. Y acortar el texto con PHP o similares tampoco sería una opción, porque entienden de carácteres pero no del tamaño que ocupan, por ejemplo: 3 L minúsculas podría ocupar lo mismo que una M.

Así se hace con CSS

En realidad es SCSS, pero no es nada que no entendería cualquiera que sepa CSS.

$font-size: 20px;
$line-height: 1.4;
$lines: 3;

.biography{
    display: block;
    display: -webkit-box;
    height: $font-size * $line-height * $lines;
    font-size: $font-size;
    line-height: $line-height;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

Y el HTML

<div class="biography">...</div>

Hay que tener en cuenta que si dentro de ese div se usan <p> u otros elementos con estilos, tendrán que modificarse también el tamaño de letra y alto de linea de esos elementos.

Y aquí un ejemplo de uso.