Cómo usar la propiedad CSS text-wrap

La propiedad CSS text-wrap le dice al navegador cómo debe ajustar el texto dentro de un contenedor (por ejemplo, un párrafo o un título) cuando este alcanza el borde del elemento​.

Es decir, controla dónde y cómo se hacen los saltos de línea automáticos, buscando un equilibrio entre legibilidad y rendimiento.

Mejora la tipografía de tu web con text-wrap

En diseño editorial, esto se tiene en cuenta y se controla desde hace siglos. En la web… no tanto. Durante años, quienes nos dedicamos al diseño web hemos tenido que soportar cierto nivel de frustración tipográfica, ya que había muchas técnicas de diseño editorial que no se podían conseguir en la web.

Sabíamos cómo tenían que quedar los párrafos, pero no podíamos controlar bien cómo se comportaban en pantalla. Las líneas finales quedaban demasiado cortas, quedaban demasiados guiones uno encima de otro, se formaban ríos o pasillos por espacios irregulares entre palabras… todo esto en web se nos escapaba.

La buena noticia es que eso está cambiando. Por fin tenemos una herramienta que nos permite mejorar la legibilidad del texto en la web sin necesidad de recurrir a hacks ni hacer malabares con el contenido.

La tipografía bien utilizada es invisible como tipografía, igual que una voz bien modulada es un vehículo discreto para transmitir palabras e ideas.

—Beatrice Warde, “La copa de cristal”

Como una copa transparente que no distrae de su contenido, una buena composición tipográfica debe desaparecer ante los ojos del lector, permitiendo que las palabras fluyan. Sin obstáculos.

Por lo tanto, una buena composición tipográfica evita que haya anomalías que son molestas y que nos distraen de la lectura.

Las opciones principales que puedes usar con text-wrap son: wrap, nowrap, balance, pretty y stable.

text-wrap: wrap – Ajuste de línea normal (por defecto)

Con text-wrap: wrap el texto se ajusta automáticamente a la siguiente línea cuando alcanza el borde del contenedor.

Es el comportamiento predeterminado en la mayoría de los elementos de texto: los espacios y los signos de puntuación se usan como puntos de ruptura para pasar palabras al siguiente renglón y evitar que el contenido se desborde.

¿Qué hace text-wrap: wrap?

No aplica ninguna lógica especial más allá de la habitual. Si una palabra no cabe al final de la línea, simplemente pasa a la siguiente.

¿Cuándo se usa text-wrap: wrap?

Siempre que quieras el comportamiento estándar. De hecho, no necesitas especificar wrap explícitamente en CSS porque es el valor predeterminado (a menos que lo hayas cambiado).

Ejemplo de uso de text-wrap: wrap

Puede ser útil cuando quieras que el párrafo ocupe todo el ancho del contenedor sí o sí. Para alinearlo con una imagen, por ejemplo.

text-wrap: nowrap – Sin ajuste de línea (no se parte el texto)

Con text-wrap: nowrap el texto no se divide en varias líneas automáticamente. En lugar de ajustarse al ancho del contenedor, continuará en una sola línea larga, pudiendo desbordar el elemento contenedor.

¿Qué hace text-wrap: nowrap?

Con nowrap, aunque el texto alcance el borde, no habrá salto de línea automático. El navegador obviará los límites del contenedor y nunca romperá la línea. Si el contenedor tiene un ancho fijo, el texto podría sobresalir o generar scroll horizontal.

¿Cuándo se usa text-wrap: nowrap?

Usa nowrap cuando quieres evitar que el texto se corte en varias líneas.

Ejemplo de uso de text-wrap: wrap

Por ejemplo, es útil en menús de navegación horizontales, botones o elementos donde un salto de línea rompería el diseño.

También se emplea para ciertas etiquetas o textos cortos que tienen que estar juntos (como un nombre completo que no quieres dividir).

Ten en cuenta que si el texto es más largo que el contenedor, este se desbordará; a veces se combina con CSS como overflow: hidden o overflow-x: auto para controlar ese desbordamiento.

text-wrap: balance – Equilibrar la longitud de las líneas de texto

Con text-wrap: balance el navegador trata de equilibrar la longitud de las líneas de texto​.

Esto significa que ajusta los puntos de corte (dónde pasa una palabra al siguiente renglón) de modo que todas las líneas queden lo más igualadas posible en número de caracteres. El resultado es que las líneas de un párrafo corto (por ejemplo, un titular o un bloque de cita) tienen longitudes similares, y así tienen un aspecto más uniforme y estético.

¿Qué hace text-wrap: balance?

En diseño editorial, siempre ajustamos manualmente un titular para que las líneas de arriba y abajo queden alineadas o parecidas en longitud. Nunca se tiene en cuenta el ancho de la caja de texto, sino que se tiene en cuenta la legibilidad del texto.

El ancho de la caja de texto marca los límites máximos, pero la línea se divide manualmente.

text-wrap: balance es como pedirle al navegador que haga ese trabajo por ti de forma automática. El navegador probará distintos lugares donde cortar la línea antes de llegar al borde, si con eso logra que las líneas queden más igualadas.

Esto puede significar que alguna línea termine un poco antes del margen derecho, para evitar que la última línea quede demasiado corta. El objetivo es mejorar la legibilidad y la estética, de manera que ninguna línea destaque por ser mucho más larga o corta que las demás.

¿Cuándo se usa text-wrap: balance?

Esta opción es ideal para textos de pocas líneas donde la apariencia cuenta mucho, por ejemplo: títulos, encabezados, subtítulos, citas destacadas o frases cortas en diseños tipográficos.

En estos casos, equilibrar las líneas puede hacer que un título de dos o tres líneas se vea más cuidado, similar a lo que se logra en diseños editoriales.

No te recomiendo que lo uses para párrafos largos, porque afecta al rendimiento, la página tardará un poco más en cargar, y porque en bloques extensos de texto no es tan necesario que todas las líneas midan igual.

De hecho, los navegadores, por rendimiento, ponen un límite interno al número de líneas sobre las que aplican el equilibrado. Por ejemplo, Chrome solo equilibrará hasta 4-6 líneas y Firefox hasta 10 líneas.

Ejemplo de uso de text-wrap: balance

Por ejemplo, lo puedes usar en todos los títulos de tu web.

Además, en esta web, fíjate en que yo lo uso en el párrafo del pie de página en el que explico a qué me dedico.

text-wrap: pretty – Saltos de línea con optimización tipográfica

Con text-wrap: pretty el navegador también ajusta cómo se realizan los cortes de línea, pero con un objetivo diferente al de balance.

En este caso no busca igualar la longitud de las líneas, sino evitar cortes de línea molestos, que distraen de la lectura.

Un párrafo que tenga text-wrap: pretty se comporta casi igual que wrap normal, pero utiliza un algoritmo más complejo y más lento, que prioriza un mejor resultado visual por encima de la rapidez. Está pensado para mejorar la legibilidad en bloques de texto largos, incluso si eso implica usar más recursos de cálculo.

¿Qué hace text-wrap: pretty?

El navegador tarda un poco más en cargar para decidir dónde romper las líneas en los elementos con pretty, con la intención de mejorar la estética del párrafo.

Estas son las mejoras tipográficas que hace text-wrap: pretty:

• Evita dejar una sola palabra colgando en la última línea de un párrafo​. En tipografía, cuando la última línea de un párrafo tiene solo una palabra muy corta se le llama palabra viuda y se considera algo a evitar por estética y legibilidad, porque es algo que molesta y distrae de la lectura.
• Evitar que haya líneas que sobresalen demasiado del borde del texto, o líneas que se quedan demasiado cortas. Esto distrae al lector, da sensación de descuido y dificulta la lectura.
• Evita el exceso de guiones. Dividir palabras con guiones puede ayudar a equilibrar la longitud de las líneas, pero cuando hay varios guiones seguidos en líneas consecutivas, se pierde fluidez. Tres guiones uno encima del otro es un error de composición.
• Evita los ríos tipográficos. A veces, los espacios entre palabras se alinean verticalmente a lo largo del párrafo, formando lo que en tipografía se llama «ríos» o «pasillos». Son caminos de vacío que cruzan el texto y que interrumpen la lectura.

¿Cuándo se usa text-wrap: pretty?

Úsalo en párrafos de texto corrido o bloques largos donde quieras la mejor experiencia de lectura posible.

Por ejemplo, en el contenido de los artículos del blog o cualquier texto donde la presentación tipográfica sea importante.

Ten en cuenta dos cosas importantes:

• Tiene impacto en el rendimiento. La página carga un poco más lenta porque el navegador hace más cálculos para distribuir el texto​. Por eso, aplícalo solo si de verdad te interesa esta mejora tipográfica (en textos que sea importante que tengan una lectura cómoda).
• El efecto puede ser sutil. pretty arregla casos obvios de errores tipográficos, como las palabras viudas, pero no garantiza una perfección tipográfica, ya que es un ajuste automático. Aun así, el texto quedará mejor que si no lo aplicas.

Ejemplo de uso de text-wrap: pretty

Un párrafo de dos líneas donde, con ajuste normal, la segunda línea tiene una única palabra (una típica «viuda»). Si aplicamos text-wrap: pretty, el navegador recalcula y mueve al siguiente renglón la palabra anterior a la segunda línea, para que el párrafo quede mejor, ya que la última línea se ve más equilibrada.

Ahora, practica

Te invito a probar text-wrap: pretty y text-wrap: balance en esta demo creada por Jen Simmons, diseñadora gráfica y desarrolladora que trabaja en Apple mejorando la experiencia de desarrollo en Safari y WebKit con tecnologías como text-wrap: pretty, CSS Grid y muchas más.

text-wrap: stable – Ajuste estable durante la edición de texto

La opción text-wrap: stable es un caso especial pensado para cuando el contenido es editable por el usuario. Es decir, elementos con contenteditable o en un editor de texto dentro de la página.

Su comportamiento en general es como el de un wrap normal, excepto cuando estamos modificando un texto editable: en ese caso, stable hace que las líneas anteriores a la que se está editando permanezcan «congeladas» (estables), de modo que al insertar o borrar texto no se redistribuya todo el párrafo constantemente.

¿Qué hace text-wrap: stable?

Cuando el usuario escribe en un editor de texto, por ejemplo, al editar un comentario o en un campo de texto enriquecido, si no usamos stable, a medida que el usuario escribe, es posible que las palabras de líneas anteriores salten a otra línea porque el párrafo se recoloca entero y puede ser un poco confuso visualmente.

Con text-wrap: stable, el navegador intentará no reajustar las líneas que están por encima del cursor mientras se edita. Así, los cambios de ajuste solo ocurren de la línea actual hacia abajo, dejando lo anterior intacto y esto da una sensación de estabilidad: el texto que ya estaba colocado no salta a nuevas posiciones por culpa de lo que escribes más abajo.

¿Cuándo se usa text-wrap: stable?

Obviamente, esta opción solo tiene sentido en elementos que el usuario puede editar (por ejemplo, un <div contenteditable="true"> o un editor de texto enriquecido).

Si estás creando una aplicación web donde el usuario edita documentos, comentarios, notas, etc., text-wrap: stable mejora la experiencia de usuario porque evita distracciones.

Para contenido estático normal no es necesario; de hecho, en texto no editable stable se comporta igual que wrap. Sin más.

Ejemplo de uso de text-wrap: stable

En un comentario de un artículo del blog, si el usuario escribe una palabra larga al inicio del texto, esta palabra podría empujar a otras palabras a la siguiente línea, cambiando todos los saltos de línea en el párrafo. Con stable, las primeras líneas permanecerán tal como estaban antes de la edición, y solo las líneas posteriores se ajustarán, evitando movimientos bruscos en la parte ya escrita. Esto hace más cómoda la edición porque el usuario mantiene referencias visuales estables de lo que ya ha escrito.

Lo que yo te recomiendo

• Usa wrap o auto si no quieres modificar el comportamiento estándar.
• Usa nowrap cuando necesites evitar cualquier salto de línea automático en un texto específico.
• Usa pretty para párrafos en los que quieras mejorar la legibilidad evitando líneas viudas u otros detalles tipográficos, pero ten en cuenta que los navegadores antiguos no son compatibles y que tiene un impacto en el rendimiento. No lo uses en todos los párrafos de la web sino solo donde haya bloques de texto largos en los que quieras que haya una buena legibilidad. Por ejemplo, en los artículos del blog.
• Usa balance para los títulos de la web (y para párrafos cortos con varias líneas en los que quieras cuidar la estética), para que todas las líneas sean igual de largas, sin importar el ancho del contenedor. Esto no afectará al rendimiento porque el impacto es mínimo, ya que los navegadores son inteligentes y solo aplican el balance hasta cierto número de líneas.
• No uses balance en párrafos largos: da resultados raros y, además, no hace falta, es mejor usar pretty.
• Usa stable para contenidos editables, para mejorar la experiencia de edición manteniendo líneas sin cambios mientras el usuario escribe.

👉 Si valoras estos detalles tipográficos y quieres una web profesional donde la legibilidad también esté diseñada con intención, descubre cómo trabajo el diseño de webs corporativas.

¿Se puede usar ya en producción?

Eso depende de cuándo estés leyendo esto… lo mejor es que lo consultes en Can I use porque Safari y Firefox aún se están poniendo al día.

• wrap y nowrap sí son seguros de usar prácticamente en cualquier entorno.
• balance es una característica nueva y tiene compatibilidad amplia desde 2024. Puedes usarlo sin problemas para mejorar títulos sabiendo que, si el navegador no fuera compatible, el título simplemente se verá con el ajuste normal (no perjudica la experiencia, solo no la mejora).
• pretty aún no es compatible con todos los navegadores. Lo puedes usar porque no se rompe nada, únicamente se pierde la mejora tipográfica.
• stable sí es compatible con los navegadores modernos actualizados.

Te lo ha contado

Ana Cirujano

Soy diseñadora y ayudo a negocios online a fortalecer su marca, mejorar la experiencia de usuario y obtener mejores resultados.

Quién soy Cómo te puedo ayudar