CSS / Truncar texto en una o varias líneas con puntos suspensivos

Para acortar visualmente texto largo con CSS, usa text-overflow: ellipsis para una sola línea y las propiedades line-clamp para limitar varias líneas. CSS no elimina la cadena original ni devuelve un número fijo de caracteres. El ancho disponible, el ajuste y el desbordamiento deben funcionar juntos para que la truncación se muestre.

Distinguir la truncación visual de la modificación del texto

Limitar un título a una línea o un resumen de tarjeta a tres líneas es diferente de usar los primeros 20 caracteres como datos. Usa CSS para el límite visual y JavaScript o procesamiento del lado del servidor para una operación de cadena real. El texto oculto permanece en el documento, por lo que CSS no reduce la longitud de los datos originales ni el tamaño de la transferencia.

Comparar una y tres líneas con un ejemplo completo

Guarda el código completo a continuación como truncate.html en UTF-8 y ábrelo en un navegador. No se necesita ninguna biblioteca ni servidor. La oración repetida hace que el texto sea lo suficientemente largo, y la tarjeta tiene un ancho máximo de 24rem. Guarda y recarga después de editar, luego compara ventanas más anchas y más estrechas.

<!DOCTYPE html>

<html lang="es">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Comparar texto truncado en una y varias líneas</title>
<style>
    body { max-width: 42rem; margin: 0 auto; padding: 1rem; font-family: sans-serif; }
    h2 { font-size: 1.1rem; }
    .card { width: 100%; max-width: 24rem; }
    .frame { padding: 12px; border: 1px solid #777; margin-block: 1rem; }
    .sample { margin: 0; }
    .one { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .three { font-size: 16px; line-height: 1.6; max-height: 4.8em; overflow: hidden;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .row { display: flex; align-items: center; gap: 12px; }
    .grow { flex: 1; min-width: 0; }
    .badge { flex: 0 0 auto; }
    .full { line-height: 1.6; overflow-wrap: anywhere; }
  </style>
</head>
<body>
<h1>Comparar texto truncado en una y varias líneas</h1>
<div class="card">
<h2>text-overflow: ellipsis</h2>
<div class="frame"><p class="sample one">Este ejemplo muestra un título y un resumen largos dentro de una tarjeta limitada. Aunque parte del texto se acorte visualmente, el pasaje completo está disponible en la sección desplegable inferior. Este ejemplo muestra un título y un resumen largos dentro de una tarjeta limitada. Aunque parte del texto se acorte visualmente, el pasaje completo está disponible en la sección desplegable inferior. Este ejemplo muestra un título y un resumen largos dentro de una tarjeta limitada. Aunque parte del texto se acorte visualmente, el pasaje completo está disponible en la sección desplegable inferior. Este ejemplo muestra un título y un resumen largos dentro de una tarjeta limitada. Aunque parte del texto se acorte visualmente, el pasaje completo está disponible en la sección desplegable inferior. </p></div>
<h2>-webkit-line-clamp: 3</h2>
<div class="frame"><p class="sample three">Este ejemplo muestra un título y un resumen largos dentro de una tarjeta limitada. Aunque parte del texto se acorte visualmente, el pasaje completo está disponible en la sección desplegable inferior. Este ejemplo muestra un título y un resumen largos dentro de una tarjeta limitada. Aunque parte del texto se acorte visualmente, el pasaje completo está disponible en la sección desplegable inferior. Este ejemplo muestra un título y un resumen largos dentro de una tarjeta limitada. Aunque parte del texto se acorte visualmente, el pasaje completo está disponible en la sección desplegable inferior. Este ejemplo muestra un título y un resumen largos dentro de una tarjeta limitada. Aunque parte del texto se acorte visualmente, el pasaje completo está disponible en la sección desplegable inferior. </p></div>
<h2>display: flex</h2>
<div class="frame row"><div class="grow"><p class="sample one">Este ejemplo muestra un título y un resumen largos dentro de una tarjeta limitada. Aunque parte del texto se acorte visualmente, el pasaje completo está disponible en la sección desplegable inferior. Este ejemplo muestra un título y un resumen largos dentro de una tarjeta limitada. Aunque parte del texto se acorte visualmente, el pasaje completo está disponible en la sección desplegable inferior. Este ejemplo muestra un título y un resumen largos dentro de una tarjeta limitada. Aunque parte del texto se acorte visualmente, el pasaje completo está disponible en la sección desplegable inferior. Este ejemplo muestra un título y un resumen largos dentro de una tarjeta limitada. Aunque parte del texto se acorte visualmente, el pasaje completo está disponible en la sección desplegable inferior. </p></div><span class="badge">A</span></div>
<details>
<summary>Leer el texto completo</summary>
<p class="sample full">Este ejemplo muestra un título y un resumen largos dentro de una tarjeta limitada. Aunque parte del texto se acorte visualmente, el pasaje completo está disponible en la sección desplegable inferior. Este ejemplo muestra un título y un resumen largos dentro de una tarjeta limitada. Aunque parte del texto se acorte visualmente, el pasaje completo está disponible en la sección desplegable inferior. Este ejemplo muestra un título y un resumen largos dentro de una tarjeta limitada. Aunque parte del texto se acorte visualmente, el pasaje completo está disponible en la sección desplegable inferior. Este ejemplo muestra un título y un resumen largos dentro de una tarjeta limitada. Aunque parte del texto se acorte visualmente, el pasaje completo está disponible en la sección desplegable inferior. </p>
</details>
</div>
</body>
</html>

Espera la truncación en una línea en el primer recuadro, como máximo tres líneas en el segundo donde se soporte, y truncamiento en una línea dentro de Flexbox en el tercero. Abre la sección expandible a continuación para leer el pasaje completo. El texto corto puede que nunca alcance un límite y, por lo tanto, no mostrar puntos suspensivos. El ajuste real depende de la fuente, el contenido y el ancho disponible.

Condiciones para los puntos suspensivos en una línea

La truncación de una sola línea requiere que el texto se desborde de su espacio horizontal. white-space: nowrap evita el ajuste de línea, overflow: hidden oculta el exceso y text-overflow: ellipsis marca el final recortado. La siguiente es la regla .one completa del ejemplo.

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

Configurar solo text-overflow no fuerza el desbordamiento ni hace que la caja sea más estrecha. La tarjeta contenedora limita el ancho aquí. Si una caja sigue creciendo con su contenido, o el texto es lo suficientemente corto, no aparece la elipsis. Los elementos en línea ordinarios pueden no comportarse como se espera; verifica la caja de bloque y el contexto de diseño real. explicación de text-overflow de MDN

Limitar varias líneas y usar una altura alternativa

Agregar text-overflow: ellipsis por sí solo no coloca una elipsis al final de la tercera línea. El ejemplo combina las declaraciones de compatibilidad heredadas -webkit-line-clamp: 3, display: -webkit-box y -webkit-box-orient: vertical, junto con overflow oculto. La siguiente es su regla .three.

.three {
  font-size: 16px;
  line-height: 1.6;
  max-height: 4.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

Con tamaño de fuente de 16px y altura de línea de 1.6 aquí, una línea mide 25.6px de alto y tres líneas ocupan 76.8px, o 4.8em. max-height: 4.8em limita la altura incluso si la restricción no está disponible. Un límite de altura por sí solo no garantiza una elipsis. Este cálculo asume el tamaño de fuente y la altura de línea constantes del ejemplo, sin relleno o borde separado en el elemento de texto.

La propiedad line-clamp sin prefijo tiene soporte variable en los navegadores, así que revisa la tabla de compatibilidad y la representación en tus entornos objetivo. Aplícala progresivamente con una consulta de características cuando sea apropiado y verifica el soporte antes de reemplazar las declaraciones de compatibilidad. Para comparar dos líneas, cambia tanto el valor de -webkit-line-clamp como la altura de respaldo a 2 y 3.2em, luego restaura los valores originales. Información sobre compatibilidad y soporte de line-clamp en MDN

Cuando un elemento no se reduce en Flexbox o Grid

El ancho mínimo automático de un elemento flexible puede mantenerlo vinculado al tamaño de su contenido, evitando que se encoja lo suficiente a medida que su contenedor se estrecha. El ejemplo da a .grow tanto flex: 1 como min-width: 0 para que pueda encogerse. Aplica truncamiento a .one, que realmente contiene el texto.

Elimina temporalmente el min-width de .grow en las herramientas de desarrollo, compara y restáuralo. Esto no es un requisito universal para cada elemento flex; inspecciona el tamaño mínimo real y las condiciones de desbordamiento. Para problemas de tamaño mínimo automático en Grid, verifica el min-width del elemento y considera una definición de pista flexible como minmax(0, 1fr) cuando sea apropiado. MDN explicación de tamaños mínimos automáticos en min-width

Dar acceso al texto completo

Proporciona una manera de leer el contenido oculto. Los elementos details y summary del ejemplo son elementos HTML nativos que funcionan con mouse, táctil y teclado sin JavaScript. Una interfaz real puede, en su lugar, proporcionar un enlace a la página de detalles u otro control de expansión claro.

1. No confíes en un tooltip de mouse con el atributo title como la única manera de leer el contenido completo. Los usuarios táctiles y de teclado también necesitan acceso.
2. Cómo se expone el texto oculto cuando se copia o se lee mediante tecnología asistiva puede variar. Verifica que el texto necesario permanezca legible y que el enfoque funcione en el control de expansión.
3. Revisa las pantallas móviles, el zoom y las fuentes seleccionadas por el usuario. No prometas un recuento fijo de caracteres o palabras, y evita aplicar recorte a información esencial, botones o campos de entrada.