Texto, overflow y listas

Desbordamiento de texto

Cuando el contenido textual de un elemento excede el espacio disponible, Tailwind CSS ofrece varias estrategias para gestionar ese desbordamiento. Estas utilidades resultan fundamentales en tarjetas, listados de productos y cualquier componente con dimensiones fijas.

Truncado en una sola línea

La clase truncate aplica una combinación de propiedades que recorta el texto en una única línea y añade puntos suspensivos al final:

<p class="truncate w-64">
  Este texto es demasiado largo para caber en el contenedor y se recortará con puntos suspensivos.
</p>

Internamente, truncate equivale a aplicar overflow-hidden, text-ellipsis y whitespace-nowrap de forma conjunta. Si se necesita un control más granular, estas tres clases pueden usarse por separado.

Truncado multilínea con line-clamp

Para limitar el texto visible a un número concreto de líneas, se utiliza la clase line-clamp-{n}, donde {n} es el número máximo de líneas que se mostrarán:

<p class="line-clamp-2 w-64">
  Este párrafo tiene mucho contenido pero solo se mostrarán las dos primeras
  líneas. El resto del texto quedará oculto y se añadirán puntos suspensivos
  al final de la segunda línea.
</p>

<p class="line-clamp-3 w-64">
  Con line-clamp-3 se mostrarán hasta tres líneas de texto antes de truncar
  el contenido sobrante con puntos suspensivos automáticos.
</p>

La clase line-clamp-none elimina la restricción de líneas, lo que permite restaurar el comportamiento normal en breakpoints responsivos, por ejemplo: line-clamp-2 md:line-clamp-none.

Text-ellipsis y text-clip

Estas dos clases controlan cómo se indica el desbordamiento al usuario:

• text-ellipsis: muestra puntos suspensivos (…) donde el texto se corta.
• text-clip: corta el texto de forma abrupta sin indicador visual.

<p class="overflow-hidden text-ellipsis whitespace-nowrap w-48">
  Texto largo con puntos suspensivos al final del contenedor.
</p>

<p class="overflow-hidden text-clip whitespace-nowrap w-48">
  Texto largo cortado abruptamente sin indicador visual.
</p>

Ambas clases requieren overflow-hidden para que el recorte sea efectivo.

Ajuste de texto

Las clases de ajuste de texto controlan cómo se distribuyen las líneas dentro de un bloque de texto. Estas utilidades son especialmente relevantes en títulos, párrafos de ancho variable y contenido generado dinámicamente.

Text-wrap y text-nowrap

• text-wrap: permite que el texto salte de línea normalmente (comportamiento por defecto).
• text-nowrap: impide los saltos de línea, manteniendo todo el texto en una sola línea.
• text-balance: distribuye las líneas de forma equilibrada para que todas tengan una longitud similar. Ideal para titulares.
• text-pretty: optimiza la distribución evitando que quede una sola palabra huérfana en la última línea.

<h2 class="text-balance text-3xl font-bold w-80">
  Un titular largo que se distribuye de forma equilibrada entre líneas
</h2>

<p class="text-pretty w-64">
  Este párrafo evita que quede una palabra solitaria en la última línea del bloque.
</p>

La clase text-balance utiliza la propiedad CSS text-wrap: balance, que resulta muy útil en titulares para evitar que una línea sea mucho más corta que las demás.

Control de saltos de palabra

Cuando el contenido incluye cadenas largas sin espacios (URLs, identificadores, rutas), se necesitan clases específicas para gestionar los saltos de palabra:

• break-words: permite romper las palabras largas para que no desborden el contenedor.
• break-all: rompe entre cualquier par de caracteres, sin respetar límites de palabra.
• break-keep: impide los saltos en textos CJK (chino, japonés, coreano), manteniendo las frases intactas.
• hyphens-auto: añade guiones automáticos en los puntos de ruptura adecuados.
• hyphens-none: desactiva la separación silábica.

<div class="break-words w-48 border p-3">
  https://www.ejemplo.com/ruta/muy/larga/que/necesita/romperse/para/caber
</div>

<div class="hyphens-auto w-48 border p-3" lang="es">
  Electroencefalografista es una palabra que se separará con guiones automáticamente.
</div>

Whitespace

Las clases de whitespace controlan cómo el navegador gestiona los espacios en blanco y los saltos de línea dentro de un elemento:

• whitespace-normal: colapsa espacios múltiples y permite saltos de línea automáticos (por defecto).
• whitespace-nowrap: colapsa espacios pero impide los saltos de línea.
• whitespace-pre: conserva todos los espacios y saltos de línea tal como están en el código fuente.
• whitespace-pre-line: colapsa espacios múltiples pero respeta los saltos de línea explícitos.
• whitespace-pre-wrap: conserva espacios y saltos, y añade saltos automáticos cuando es necesario.
• whitespace-break-spaces: similar a pre-wrap pero los espacios al final de línea no se colapsan.

<pre class="whitespace-pre bg-gray-100 p-4 rounded font-mono text-sm">
  Este texto     conserva
  los espacios   y saltos
  exactamente    como están escritos.
</pre>

<p class="whitespace-pre-line w-64">
  Primera línea.
  Segunda línea tras un salto explícito.
  Los    espacios múltiples se colapsan.
</p>

La clase whitespace-pre es habitual para bloques de código o texto preformateado, mientras que whitespace-nowrap se combina frecuentemente con truncate para truncar texto en una sola línea.

Estilos de lista

Tailwind CSS permite controlar la apariencia de las listas HTML mediante clases de utilidad que definen el tipo de marcador, su posición y opcionalmente una imagen personalizada.

Tipo de marcador

• list-disc: muestra viñetas circulares (listas desordenadas).
• list-decimal: muestra números (listas ordenadas).
• list-none: elimina los marcadores.

<ul class="list-disc pl-6 space-y-1">
  <li>Elemento con viñeta</li>
  <li>Otro elemento con viñeta</li>
  <li>Tercer elemento con viñeta</li>
</ul>

<ol class="list-decimal pl-6 space-y-1">
  <li>Primer paso</li>
  <li>Segundo paso</li>
  <li>Tercer paso</li>
</ol>

<ul class="list-none space-y-1">
  <li>Sin marcador</li>
  <li>Tampoco tiene marcador</li>
</ul>

Posición del marcador

• list-inside: coloca el marcador dentro del flujo de texto del elemento.
• list-outside: coloca el marcador fuera del bloque de contenido (por defecto).

<ul class="list-disc list-inside bg-gray-100 p-4 rounded">
  <li>Marcador dentro del flujo de texto</li>
  <li>El texto se alinea con el marcador</li>
</ul>

<ul class="list-disc list-outside ml-6 bg-gray-100 p-4 rounded">
  <li>Marcador fuera del bloque de contenido</li>
  <li>El texto mantiene su alineación independiente</li>
</ul>

Imagen como marcador

La clase list-image-* permite usar una imagen personalizada como marcador de lista mediante un valor arbitrario:

<ul class="list-image-[url('checkmark.svg')] pl-6 space-y-1">
  <li>Elemento con icono personalizado</li>
  <li>Otro elemento con icono</li>
</ul>

Contenido de pseudo-elementos

La utilidad content de Tailwind CSS permite definir contenido generado para los pseudo-elementos ::before y ::after. Esto resulta útil para añadir decoraciones, etiquetas o indicadores visuales sin modificar el HTML.

Sintaxis básica

La clase before:content-['texto'] o after:content-['texto'] inyecta contenido textual antes o después del elemento:

<span class="before:content-['*'] before:mr-1 text-yellow-500 font-semibold">
  Destacado
</span>

<a href="#" class="after:content-['->'] after:ml-1 text-blue-600 underline">
  Enlace externo
</a>

Contenido vacío para decoraciones

Para crear elementos decorativos puros, se usa content-[''] combinado con estilos de bloque:

<h3 class="relative pb-2 text-xl font-bold
           after:content-[''] after:absolute after:bottom-0 after:left-0
           after:w-12 after:h-1 after:bg-blue-500 after:rounded">
  Título con subrayado decorativo
</h3>

Contenido dinámico con atributos

La función attr() permite extraer el valor de un atributo HTML y mostrarlo como contenido generado:

<span class="before:content-[attr(data-label)] before:font-bold before:mr-2"
      data-label="Nuevo:">
  Producto recién añadido al catálogo
</span>

Interactividad de texto

Tailwind CSS incluye utilidades para controlar cómo interactúa el usuario con la selección de texto y la apariencia de elementos de formulario.

Selección de texto

• select-none: impide que el usuario seleccione el texto.
• select-text: permite la selección de texto (por defecto).
• select-all: selecciona todo el contenido al hacer clic.
• select-auto: restaura el comportamiento por defecto del navegador.

<p class="select-none bg-gray-100 p-3 rounded">
  Este texto no se puede seleccionar.
</p>

<code class="select-all bg-gray-800 text-green-400 p-3 rounded block">
  npm install tailwindcss
</code>

La clase select-all es muy práctica en bloques de código o comandos que el usuario necesita copiar con un solo clic.

Color del cursor y acento

• caret-{color}: cambia el color del cursor de texto en campos de entrada.
• accent-{color}: cambia el color de acento en checkboxes, radios y sliders del navegador.

<input type="text" placeholder="Cursor azul"
       class="caret-blue-500 border rounded p-2 w-full">

<label class="flex items-center gap-2">
  <input type="checkbox" class="accent-emerald-500 w-5 h-5">
  Acepto los términos y condiciones
</label>

Estas utilidades permiten ajustar la apariencia de los controles nativos del navegador sin necesidad de reemplazarlos por componentes personalizados.