Evita que los titulares se rompan en el lugar equivocado

Un titular que se rompe después de una palabra corta, una única palabra que queda huérfana en la última línea y una URL larga que ensancha su contenedor son tres defectos distintos, y cada uno suele requerir una solución diferente en CSS o HTML.

También comparten un rasgo molesto: solo existen a determinados anchos de contenedor. El diseñador captura el titular roto en un móvil de 384px, tú abres la página con el ancho de tu escritorio y todo se ve bien. Los saltos incorrectos suelen habitar en franjas estrechas de viewport que nadie probó, y por eso ver session replays a los anchos con los que realmente navegaron los usuarios suele ser la forma más rápida de observar el defecto tal como ocurrió.

Este artículo recorre cada problema visible, la herramienta que lo soluciona y el razonamiento que te ayudará a elegir la correcta la próxima vez.

¿Cómo prohibir un salto en un punto concreto?

Para impedir que el navegador rompa una línea en un punto específico, cambia el carácter divisible por su gemelo indivisible. Un espacio de no separación ( , U+00A0) mantiene dos palabras en la misma línea al reemplazar el espacio ordinario entre ellas por uno en el que el navegador no puede romper. Esa es la solución para un titular que salta justo después de «de» o que deja el nombre de un producto partido entre dos líneas.

El texto también puede romperse donde no hay espacio, sobre todo después de un guion. El word joiner (U+2060, escrito como la referencia con nombre ⁠, sensible a mayúsculas y minúsculas) prohíbe un salto sin añadir ancho alguno, y el guion de no separación (U+2011, ‑, que no tiene entidad con nombre) muestra un guion que no puede convertirse en punto de ruptura:

<h2>Shipping the new editor to&nbsp;everyone</h2>
<p>Take the exit for I&#8209;95 north.</p>

¿Cómo permitir un salto en un punto concreto?

El problema inverso es una cadena larga que sí quieres romper, pero solo en los puntos que tú elijas. Insertar un elemento <wbr> ofrece al navegador un lugar adicional donde terminar una línea, y no se inserta nada visible si el salto se produce. El guion suave ­ (U+00AD) marca el mismo tipo de oportunidad, pero muestra un guion cuando el salto se produce; hasta entonces permanece invisible. Funciona con el valor por defecto hyphens: manual, así que solo falla si algo ha establecido hyphens: none.

<p>https://docs.example.com<wbr>/reference<wbr>/text-wrapping</p>
<p>The rise of hyper&shy;modularization</p>

Usa <wbr> para URLs e identificadores mostrados en pantalla, y ­ para palabras reales.

Cadenas largas indivisibles: overflow-wrap: anywhere

Para contenido generado por usuarios, URLs largas y tokens que no puedes anotar a mano, establece overflow-wrap: anywhere y deja que el navegador rompa como último recurso. El detalle crítico es el cálculo del tamaño intrínseco. Ambos valores permiten al navegador partir una palabra larga, pero solo anywhere hace que esos puntos de ruptura de emergencia cuenten para el ancho min-content del elemento; break-word deja ese ancho en la longitud de la cadena entera sin romper. Por eso un elemento flex que contiene una URL larga puede seguir negándose a encogerse y reventar el layout con break-word, pero se encoge correctamente con anywhere. CSS Text Level 4 define ambos valores de forma idéntica salvo por esta única diferencia, y es precisamente la diferencia con la que la gente se topa en la práctica.

.card { display: flex; gap: 1rem; }
.card-body {
  /* break-word leaves min-content at the full URL width */
  overflow-wrap: anywhere;
}

El valor anywhere funciona en todos los motores modernos; Safari fue el último en implementarlo, en la versión 15.4 (marzo de 2022). Algunas bases de código antiguas todavía arrastran el obsoleto word-break: break-word, que acaba ajustando el texto exactamente igual que overflow-wrap: anywhere mientras deja word-break en su comportamiento normal. Reemplázalo.

¿Dónde encaja word-break: break-all?

word-break: break-all coloca el salto allí donde la línea se queda sin espacio, incluso en mitad de una palabra. No añade ningún guion y no baja una palabra completa a la línea siguiente para mantenerla intacta, así que la prosa normal queda cortada al final de cada línea. Eso lo convierte en la herramienta equivocada para la prosa y en la adecuada para cadenas donde los límites entre palabras no aportan significado: hashes de commits, claves de API, tokens en celdas de tabla. Su valor keep-all cubre la necesidad opuesta en CJK, suprimiendo los saltos entre caracteres.

.commit-hash {
  font-family: monospace;
  word-break: break-all; /* never on prose */
}

Columnas estrechas: hyphens: auto más un atributo lang

Cuando una columna estrecha fuerza rupturas en mitad de las palabras, un punto de partición correcto según el diccionario se lee mucho mejor que un corte a la fuerza. hyphens: auto no hace nada a menos que el elemento o alguno de sus ancestros lleve un atributo lang. Cada idioma divide las palabras a su manera, así que el navegador necesita saber cuál consultar antes de poder aplicar la partición silábica. La propiedad tiene disponibilidad amplia en Baseline: funciona sin prefijos en todos los navegadores desde septiembre de 2023.

<aside lang="en" class="sidebar-note">Uncharacteristically long words wrap cleanly here.</aside>

.sidebar-note { hyphens: auto; }

Titulares y párrafos: text-wrap balance y pretty

Para una palabra solitaria en la última línea de un titular, text-wrap: balance iguala las longitudes de línea eligiendo de otro modo entre los puntos de ruptura ya existentes de la línea; no crea ninguno nuevo ni redimensiona la caja del elemento, de modo que un titular equilibrado conserva su ancho original. El equilibrado es costoso, así que los navegadores lo limitan: Chromium se detiene en seis líneas, Firefox en diez, y los bloques más largos se ajustan con normalidad. text-wrap: pretty está pensado para el cuerpo de texto y dedica más esfuerzo de layout a evitar huérfanas; es compatible con Chromium y con Safari, que lo incorporó en la versión 26, pero todavía no con Firefox. La propiedad text-wrap en sí funciona en los navegadores más recientes desde marzo de 2024.

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

Referencia de problema a herramienta

El patrón que subyace a todo el conjunto de herramientas: identifica si el defecto requiere prohibir un salto, permitir un salto o una estrategia de ajuste global, y luego aplica la herramienta más específica que lo resuelva. Una base razonable es overflow-wrap: anywhere en los contenedores que albergan contenido de usuario, balance en los encabezados y pretty en los párrafos; deja las entidades a nivel de carácter para los saltos concretos que un diseñador señale después.

Preguntas frecuentes

¿Cuál es la diferencia entre overflow-wrap y word-break?

overflow-wrap entra en juego únicamente cuando una palabra es demasiado larga para caber en una línea propia, y todo lo demás se ajusta con normalidad. word-break: break-all cambia la estrategia de todo el elemento y partirá una palabra allí donde la línea se quede sin espacio. Usa overflow-wrap: anywhere para URLs largas ocasionales dentro de prosa normal, y word-break: break-all solo para hashes y tokens donde los límites entre palabras no aportan significado.

¿Es word-wrap lo mismo que overflow-wrap?

Sí. La propiedad nació como una extensión de Microsoft llamada word-wrap, adoptó más tarde el nombre estándar overflow-wrap, y los navegadores siguen aceptando el nombre antiguo como alias del nuevo. Escribe overflow-wrap en el código nuevo; los navegadores actuales no necesitan word-wrap como respaldo, y las hojas de estilo que declaran ambas simplemente están estableciendo la misma propiedad dos veces.

¿Cuándo debo usar un espacio de ancho cero en lugar del elemento wbr?

Usa el espacio de ancho cero (U+200B, escrito como la referencia ​) cuando solo puedas modificar la cadena en sí, como contenido almacenado en un CMS o devuelto por una API, y usa el elemento wbr cuando controles el HTML. El espacio de ancho cero es un carácter invisible que permanece en el texto, así que viaja con las operaciones de copiar y pegar y puede interferir con las búsquedas de coincidencia exacta.

¿Qué ocurre en los navegadores que no admiten text-wrap: pretty?

La declaración simplemente se ignora y el texto se ajusta con el algoritmo predeterminado línea a línea, de modo que nada se rompe visualmente. CSS descarta las declaraciones cuyos valores no reconoce, lo que convierte a text-wrap: pretty y text-wrap: balance en mejoras progresivas seguras: los navegadores compatibles obtienen mejores saltos de línea y todo lo demás se renderiza exactamente como antes. No hace falta ninguna feature query ni declaración de respaldo.