Recortar textos largos con puntos suspensivos usando text-overflow

En esta lección cortarás con elegancia los títulos demasiado largos para que no rompan la maquetación.

Hacen falta tres propiedades juntas y ninguna sobra: white-space: nowrap impide el salto de línea, overflow: hidden oculta lo que se sale y text-overflow: ellipsis sustituye el corte por «…». Si falta cualquiera de las tres, el efecto no aparece.

El código de ejemplo limita el ancho a 150px y muestra el título recortado con puntos suspensivos. Acorta el texto y verás que, cuando cabe, no se recorta nada.

Justamente esa combinación de tres es el tropiezo más habitual: mucha gente escribe solo text-overflow: ellipsis y se pregunta por qué no pasa nada. Ten en cuenta además que el texto completo sigue en el HTML, así que conviene ponerlo en el atributo title para que se pueda consultar.

Para recortar a varias líneas en lugar de una, la técnica es distinta: display: -webkit-box junto con -webkit-line-clamp: 3. Se usa constantemente en resúmenes de artículos y descripciones de productos.