Truncar texto con CSS: una línea o varias, con puntos suspensivos

En una tarjeta de producto o una lista de noticias, un título demasiado largo rompe la cuadrícula. Truncar texto con CSS es cortarlo y poner puntos suspensivos («…») al final, en una línea o en las que tú digas, sin tocar el texto: el contenido completo sigue en el HTML.

En una sola línea

<p class="una">Raspberry Pi 5 con 8 GB de RAM, caja oficial, disipador activo y fuente de 27 W para proyectos de casa</p>
<p class="varias">Esta placa sirve para montar un servidor casero, un centro multimedia o una estación de pruebas para tus proyectos de electrónica. Trae dos salidas de video, cuatro puertos USB, Wi-Fi, Bluetooth y un conector PCIe para un disco NVMe, que la vuelve mucho más rápida que las versiones anteriores.</p>

body { font-family: system-ui, sans-serif; }
p { width: 280px; line-height: 1.5; margin: 0 0 16px; }

.una {
  white-space: nowrap;      /* todo en un renglón */
  overflow: hidden;         /* lo que sobra no se ve */
  text-overflow: ellipsis;  /* y se marca con … */
}

.varias {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;    /* como máximo tres líneas */
  overflow: hidden;
}

Las tres declaraciones de .una van juntas y no funcionan por separado: sin white-space: nowrap el texto simplemente baja de línea, sin overflow: hidden se sale de la caja y sin text-overflow: ellipsis se corta en seco, a media letra. Además, la caja necesita un ancho: width, max-width o el que le dé su contenedor flex o grid (en un hijo de flex, a veces hace falta min-width: 0).

Medido en los tres navegadores: el título ocupa 1 línea y el texto se corta (desborda: sí).

En varias líneas: line-clamp

Para cortar en la tercera línea se usa -webkit-line-clamp. El prefijo asusta, pero no es solo de Chrome: Firefox y Safari también lo entienden, y es la forma que funciona en todos. Va siempre con display: -webkit-box, -webkit-box-orient: vertical y overflow: hidden. Medido: el párrafo queda en 3 líneas en Chromium, Firefox y WebKit. La versión sin prefijo, line-clamp, todavía no está en todos los navegadores.

Cuidado con lo que escondes

• El texto completo sigue ahí. Un lector de pantalla lo lee entero y Ctrl+F lo encuentra, aunque no se vea. Eso es bueno: no cortes el texto con JavaScript.
• Da una forma de verlo completo si es información que importa: un enlace a la página del producto, un botón «Ver más» o un details. El atributo title no basta: en el celular no se ve y muchos lectores de pantalla lo ignoran.
• No trunques datos que se comparan, como precios, fechas o números de pedido: dos productos distintos pueden verse idénticos.

Cada fragmento de HTML de esta página pasó por el Nu Html Checker 26.11.4 (el validador del W3C) y cada resultado se pintó y se midió en Chromium, Firefox y WebKit antes de publicarla. Prueba tus cambios en el editor de HTML y CSS o aprende desde cero con el curso.