Dominando el Text Overflow y el Ajuste de Líneas Avanzado en CSS

Introducción al Control Tipográfico Avanzado 📌

El manejo del texto es uno de los pilares fundamentales del diseño web. A menudo, nos enfrentamos al desafío de mostrar contenido dinámico generado por usuarios o bases de datos que no sabemos cuánto espacio ocupará. ¿Qué ocurre cuando un título es demasiado largo o una URL no tiene espacios y rompe nuestro diseño cuidadosamente estructurado? Aquí es donde entran en juego las herramientas avanzadas de CSS para el control de desbordamiento y ajuste de líneas.

En este tutorial aprenderás a transformar la forma en que tus diseños manejan el texto utilizando propiedades modernas y eficientes.

1. Comprendiendo el Flujo de Texto y el Desbordamiento Básico 🌊

Por defecto, el navegador intenta ajustar el texto dentro de su contenedor. Sin embargo, cuando una palabra es más ancha que el contenedor o una cadena de texto no contiene espacios, se produce un desbordamiento visual.

Para controlar esto, necesitamos combinar el manejo de la propiedad overflow, white-space y text-overflow. Analicemos cada una de ellas:

• white-space: Define cómo se manejan los espacios en blanco dentro de un elemento.
• overflow: Determina qué sucede con el contenido que sobrepasa los límites del contenedor.
• text-overflow: Especifica cómo se señaliza el contenido que ha sido recortado.

Ejemplo práctico de truncamiento en una sola línea

El caso más común es querer cortar un texto largo en una sola línea y mostrar puntos suspensivos (...). Para lograr esto, requerimos la famosa combinación de tres propiedades:

.texto-truncado {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 250px;
  border: 1px solid #ccc;
  padding: 8px;
}

2. Controlando el Rompimiento de Palabras con word-break y overflow-wrap 🛠️

Cuando trabajamos con idiomas con palabras muy largas o URLs extensas, el comportamiento por defecto puede romper nuestros diseños. CSS nos ofrece dos propiedades clave para decidir dónde y cómo debe romperse una palabra.

La propiedad word-break

Define si las líneas deben romperse dentro de las palabras cuando estas son demasiado largas para caber en la línea.

• normal: Usa las reglas de ruptura de palabras habituales.
• break-all: Permite que las palabras se rompan en cualquier carácter arbitrario para evitar desbordamientos.
• keep-all: Impide el salto de línea entre caracteres chinos, japoneses o coreanos (CJK).

La propiedad overflow-wrap (anteriormente word-wrap)

Indica si el navegador debe romper una palabra en una línea diferente para evitar que se desborde cuando no hay suficientes espacios.

• normal: Indica que las palabras solo se rompen en los puntos de ruptura permitidos.
• break-word: Indica que las palabras inapropiadas que no caben en su línea pueden ser interrumpidas en puntos arbitrarios si no hay otros puntos de ruptura.

.contenedor-flexible {
  width: 300px;
  overflow-wrap: break-word;
  word-break: break-word;
  background-color: #f4f4f4;
  padding: 15px;
}

3. Guiones Tipográficos Profesionales con hyphens ✨

Para textos justificados o columnas estrechas, el uso de guiones mejora enormemente la legibilidad. La propiedad hyphens le indica al navegador cómo dividir las palabras usando guiones ortográficamente correctos.

• none: Las palabras nunca se guionizan.
• manual: Las palabras se guionizan solo si hay caracteres de guion explícitos dentro de la palabra (como ­ o guiones duros).
• auto: El navegador divide las palabras automáticamente según el idioma especificado en el atributo lang del elemento HTML.

<p lang="es" class="texto-guionizado">
  La supercalifragilisticoespialidoso es una palabra extremadamente larga que requiere un control adecuado.
</p>

.texto-guionizado {
  hyphens: auto;
  text-align: justify;
  max-width: 200px;
}

4. Truncamiento Avanzado Multilínea con line-clamp 🎯

Durante años, truncar texto en múltiples líneas requería trucos complejos con JavaScript o desbordamientos basados en alturas fijas y pseudo-elementos. Hoy en día, tenemos la propiedad estándar line-clamp (anteriormente -webkit-line-clamp).

Esta propiedad permite limitar un bloque de texto a un número específico de líneas y añadir automáticamente puntos suspensivos al final de la última línea visible.

Implementación moderna de line-clamp

.tarjeta-descripcion {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

5. Tabla Comparativa de Propiedades de Texto 📊

Para ayudarte a elegir la propiedad correcta según tus necesidades, consulta la siguiente tabla resumen:

6. Ejemplo Práctico Integral: Tarjeta de Artículo Responsiva Intermedio

Vamos a aplicar todo lo aprendido en un componente real: una tarjeta de blog con un título de una sola línea y un extracto limitado a dos líneas.

Estructura HTML

<div class="card">
  <h2 class="card-title">Cómo dominar CSS avanzado en poco tiempo sin morir en el intento</h2>
  <p class="card-excerpt" lang="es">
    Aprende las mejores técnicas y trucos de desarrollo web moderno para crear interfaces limpias, adaptables y altamente profesionales usando únicamente HTML y CSS.
  </p>
</div>

Estilos CSS

.card {
  width: 320px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 20px;
  font-family: sans-serif;
}

.card-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
}

.card-excerpt {
  font-size: 0.95rem;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  hyphens: auto;
}

Preguntas Frecuentes (FAQ)

Haz clic para expandir

¿Por qué mi texto no se trunca con puntos suspensivos?

Asegúrate de que el elemento tenga un ancho específico (width o max-width), que esté configurado como un elemento de bloque o en línea-bloque, y que tengas aplicadas las propiedades overflow: hidden y white-space: nowrap (para una línea).

¿Funciona line-clamp en todos los navegadores?

Sí, los navegadores modernos soportan ampliamente -webkit-line-clamp. Es una de las técnicas más estables hoy en día para limitar líneas de texto sin necesidad de JavaScript.