Minimizar texto con css

A la hora de trabajar con un texto muy grande  en un espacio pequeño, es  útil conocer las distintas propiedades que tiene css para controlar el comportamiento de este. Por ejemplo podemos mostrar solo una fracción del texto en valor de un tamaño fijo usando unas pocas propiedades...

white-space

 Determina el comportamiento del espacio en blanco dentro de un elemento, es decir si los espacios en blanco serán contraidos y como se ajustarán las líneas.

text-overflow

Esta propiedad señala como se le muestra al usuario que hay un contenido que desborda  a su contenedor, se puede recortar, mostrar puntos suspensivos o un mensaje personalizado. Por si sola esta propiedad no fuerza  ningún comportamiento es necesario usarla en conjunto con otras propiedades veamos el ejemplo...

.element{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Veamos el siguiente caso; Tenemos un contenedor con un ancho de 180 pixeles, y dentro tenemos un parrafo con un texto largo...

El código...

div{
    width:180px;
    border: solid 1px yellow;
}

   
Este es el texto un poco largo que desborda su contenedor.
 

Y el resultado...

Este es el texto un poco largo que desborda su contenedor.

Como es evidente vemos que el texto desborda su contenedor, ahora apliquemos las propiedades vistas anteriormente...

El código...

div{
    width:180px;
    border: solid 1px yellow;
}
p{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Y el resultado...

Este es el texto un poco largo que desborda su contenedor.

Como podemos observar, en conjunto las propiedades overflow, white-space y text-overflow logran el resultado antes señalado, pero jugando con los diferentes valores  de la propiedad text-overflow se pueden lograr distintos resultados