Una vez más aquí. Hoy vengo a dejar un pequeño artículo sobre lo que me han preguntado recientemente. La verdad es que lo olvidé hasta que me encontré con este pequeño problema. El caso es que me preguntaron cómo se puede recortar un texto con CSS que no cabe en una sola línea, y añadiéndole los típicos puntos suspensivos para hacer ver al usuario que hay más texto que no cabía ahí. Bueno, pues eso se puede conseguir utilizando la regla text-overflow: ellipsis.
Como digo, el atributo que buscamos se llama text-overflow, y como valor, de entre todos los posibles, para lo que buscamos será el llamado «ellipsis». Hay que decir que para que esto funcione correctamente, tendremos que usar también otro atributo llamado overflow y un contenedor que tenga limitado su tamaño en la anchura.
Sobre esto me preguntó un usuario hace creo que una semana, y como comenté líneas más arriba, me olvidé por completo hasta que necesité ocultar el texto del nombre de los productos de Amazon que voy colocando en la versión AMP de esta página. El título de estos se salía de madre al ver la página desde un teléfono móvil, entonces tuve que ver cómo hacer esto, y es tan sencillo como utilizar el código que vamos a ver a continuación.
Cómo recortar un texto con CSS
El código CSS que se puede ver bajo estas líneas tendrás que colocarlo en la clase, id o etiqueta que mejor te convenga y que albergue el texto que quieres recortar.
.clase {
width: 250px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} 
Una breve explicación del código
- Width -> Con esta opción vamos a limitar la anchura del contenedor. Esta limitación se podría establecer en el contenedor padre.
- Text-overflow -> El valor ellipsis es el encargado de indicar que cuando no cabe todo dentro del las dimensiones del contenedor va a colocar los puntos suspensivos, para que los usuarios sean conscientes de que ahí debería haber más texto.
- Overflow -> Esta opción será la que hará que todo el texto que se quede fuera de las medidas desaparezca. Si no lo colocas, el texto se saldrá del contenedor.
- White-space -> Esto servirá para que la línea no haga lo mismo de siempre cuando se acaba el espacio. Quiero decir que así la línea no va a continuar debajo del texto, evitando así que el elemento crezca en altura.
También quiero decir que esto se puede hacer con PHP de forma bastante sencilla, pero esto comporta ciertos trabajos a mayores como sería buscar la adaptabilidad del texto a su contenedor. Por esto, utilizando CSS lo podemos hacer de forma rápida y bastante sencilla, ya que será el navegador web el que se encargará de recortar el texto donde sea necesario.
Esta posibilidad para recortar un texto con CSS como digo es muy funcional, pero su mayor problema será cuando queremos que el texto ocupe más de una línea. En este caso, me parece que si sería recomendable hacerlo con PHP.
Esto ha sido una breve explicación de lo que hace cada opción del código que acabamos de ver. Posiblemente no sea la más clara de las explicaciones, pero creo que queda libre de paja.