Curso de CSS / overflow, texto largo y puntos suspensivos

La propiedad overflow controla el contenido que se extiende más allá de un cuadro, pero por sí sola no elige una estrategia útil de ajuste de texto. Combina un comportamiento deliberado de desbordamiento con reglas de ajuste, y usa puntos suspensivos solo cuando los lectores aún puedan acceder a la información completa.

Compara los valores de overflow con contenido idéntico

La apariencia real de la barra de desplazamiento y si siempre es visible depende de la configuración de barra de desplazamiento superpuesta del sistema operativo y del navegador. Especificar scroll no significa que la barra permanecerá visible en todos los entornos. Hidden también puede desplazarse mediante script o movimiento de enfoque, por lo que no significa que “el contenido en sí haya desaparecido.” Clip, que previene completamente el desplazamiento, es un valor separado y no debe considerarse igual que hidden. La operación detallada se explica en la descripción de overflow de MDN. Antes de ocultar el overflow, verifica cómo estableces la altura del cuadro que contendrá el contenido según lo explicado en CSS Ancho, Altura, Límites min/máx y box-sizing.

Si el texto general se trata como de altura fija y oculto, la información puede desaparecer al agregar frases, traducir o agrandar los caracteres. Considera primero que la altura dependa del contenido y usa auto si se necesitan restricciones de tamaño, como en un panel separado. El ejemplo completo coloca cuatro frases idénticas en la misma caja de 96px y compara solo los valores. Después de la parte visible, dejamos algo de espacio adicional para la práctica, de modo que el texto que se desborda no oscurezca la explicación siguiente.

Ajusta las URL largas y los identificadores

.url { overflow-wrap: anywhere; }

Las URL sin espacios, códigos de identificación o palabras largas pueden empujar la caja hacia afuera porque no hay suficientes lugares para saltos de línea. overflow-wrap: anywhere da la oportunidad de un salto de línea en medio de la cadena si es necesario. No elimina el carácter en sí ni inserta un carácter de salto de línea en el valor de la cadena. Solo cambia la visualización, por lo que puedes mantener la cadena original.

Aplicar word-break: break-all en todas partes puede romper palabras comunes innecesariamente. Empieza permitiendo saltos en regiones de valor largo. Flexbox y Grid también pueden imponer tamaños mínimos automáticos, así que examina por separado el min-width del elemento relevante. Ajustar el texto y permitir que su caja se encoja resuelven diferentes partes del problema. Para más detalles, consulte MDN: overflow-wrap, Alineación de Flexbox, ajuste, gap, crecimiento y encogimiento.

Cumple las condiciones para puntos suspensivos en una línea

.title {
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

El propio text-overflow no determina el tamaño del cuadro ni los saltos de línea. La abreviatura de múltiples líneas también es un método separado de este ejemplo de una sola línea. El ejemplo completo aparece en el párrafo a continuación con el título completo para que puedas volver a leer el texto truncado. No ocultes contenido que requiera el texto original, como instrucciones importantes o mensajes de error, sin una forma de verificarlo en otro lugar. Recomendamos que no uses el mensaje emergente del atributo title como tu única fuente de texto. Por favor, consulta la descripción de text-overflow en MDN.

Haz que los paneles con desplazamiento sean accesibles desde el teclado

<div class="panel auto" tabindex="0" role="region" aria-label="Notice scroll area">
  <p>Notice content</p>
</div>

Dependiendo del navegador, el área de desplazamiento puede o no recibir automáticamente el enfoque del teclado. Al especificar tabindex="0" para el panel al que necesitas acceder, puedes navegar hacia él en el orden normal de tabulación. role="region" y un nombre descriptivo ayudan a los usuarios de tecnología asistiva a entender en qué región se encuentran. No necesariamente tienes que hacer que cada cuadro sea el objetivo de enfoque o área.

El ejemplo proporciona acceso por teclado, un nombre y un contorno de enfoque solo a los paneles auto y scroll que requieren desplazamiento. Después de ingresar con Tab, verifica si puedes moverte al último párrafo usando las teclas de flecha o Page Down. En pantallas estrechas, también asegúrate de que haya una distinción entre desplazarse dentro del panel y desplazarse en la página.

Ejecuta el ejemplo completo de desbordamiento

Guarda y abre el código a continuación como UTF-8 en overflow.html. Incluye los cuatro paneles del mismo contenido, URLs largas y títulos abreviados para preservar el texto original. La dirección example.com es una cadena usada para observar los saltos de línea y no es un enlace de recurso real.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing overflowing content</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .panel { width: 100%; max-width: 320px; height: 96px; padding: 12px;
      border: 2px solid #777; background: #eef6fa; }
    .panel p { margin: 0 0 8px; }
    .visible { overflow: visible; }
    .visible-stage { padding-bottom: 240px; }
    .hidden { overflow: hidden; }
    .auto { overflow: auto; }
    .scroll { overflow: scroll; }
    .panel:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }
    .url { max-width: 320px; padding: 12px; border: 1px solid #777; overflow-wrap: anywhere; }
    .title { width: 100%; max-width: 320px; padding: 12px; border: 1px solid #777;
      overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .original { max-width: 320px; }
  </style>
</head>
<body>
  <h1>Overflow and truncation</h1>
  <section class="visible-stage"><h2>visible</h2><div class="panel visible"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="hidden-stage"><h2>hidden</h2><div class="panel hidden"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="auto-stage"><h2>auto</h2><div class="panel auto" tabindex="0" role="region" aria-label="auto overflow comparison"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="scroll-stage"><h2>scroll</h2><div class="panel scroll" tabindex="0" role="region" aria-label="scroll overflow comparison"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <h2>Long URL wrapping</h2><p class="url">https://example.com/abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
  <h2>Single-line truncation</h2><p class="title">A day of plant care and visitor preparation at Small Garden</p>
  <p class="original">Full title: A day of plant care and visitor preparation at Small Garden</p>
</body>
</html>

1. Compara los últimos párrafos de los cuatro paneles. En visible, aparece fuera del borde; en hidden, queda recortado; y en auto·scroll, debe moverse dentro y ser legible.
2. Deja solo un párrafo en el panel auto. Cuando el contenido sea suficientemente corto, verifica si el espacio de desplazamiento desaparece y restáuralo a cuatro párrafos. No juzgues si está desbordando solo por ver la barra.
3. Muévete al panel auto con Tab y revisa los contenidos que aparecen abajo con las teclas de flecha. Asegúrate de que el contorno de enfoque sea visible, luego usa Shift+Tab para moverte al objetivo frontal.
4. Apaga las declaraciones de overflow-wrap en las URL y estrecha la ventana. Verifica si las cadenas largas se desbordan horizontalmente y después restaura el valor anywhere.
5. Cambia solo el text-overflow del título a clip y compara los resultados de ser cortado sin los puntos suspensivos. Luego, cambia nowrap a normal para comprobar el resultado del ajuste de línea y devuélvelo al valor original.

Si toda la página se desplaza horizontalmente, comprueba el ancho/padding mínimo del elemento más ancho y su contenedor padre. Si el contenido que se debe leer desaparece, primero revisa la altura fija y lo oculto. Antes de añadir desplazamiento o puntos suspensivos, necesitas determinar cómo preservar el texto original y si se puede manipular.