text-wrap

Baseline 2024

Newly available

Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

La propiedad abreviada de CSS text-wrap controla cómo se envuelve el texto dentro de un elemento. Los diferentes valores proporcionan:

Mejoras tipográficas, por ejemplo, longitudes de línea más equilibradas en títulos divididos.
Una forma de desactivar completamente el ajuste de texto.

Nota: Las propiedades white-space-collapse y text-wrap pueden declararse juntas usando la propiedad abreviada white-space.

Propiedades constituyentes

Esta propiedad es una abreviatura de las siguientes propiedades de CSS:

Sintaxis

css

/* Valores de palabras clave */
text-wrap: wrap;
text-wrap: nowrap;
text-wrap: balance;
text-wrap: pretty;
text-wrap: stable;

/* Valores globales */
text-wrap: inherit;
text-wrap: initial;
text-wrap: revert;
text-wrap: revert-layer;
text-wrap: unset;

La propiedad text-wrap se especifica como una palabra clave única elegida de la lista de valores a continuación.

Valores

wrap: El texto se envuelve en líneas en caracteres apropiados (por ejemplo, espacios en idiomas como el inglés que usan separadores de espacio) para minimizar el desbordamiento. Este es el valor predeterminado.
nowrap: El texto no se envuelve en líneas. Desbordará su elemento contenedor en lugar de dividirse en una nueva línea.
balance: El texto se envuelve de una manera que equilibra mejor el número de caracteres en cada línea, mejorando la calidad y la legibilidad del diseño. Dado que contar caracteres y equilibrarlos en varias líneas es computacionalmente costoso, este valor solo es compatible con bloques de texto que abarcan un número limitado de líneas (seis o menos para Chromium y diez o menos para Firefox).
pretty: Da como resultado el mismo comportamiento que wrap, excepto que el agente de usuario utilizará un algoritmo más lento que favorece un mejor diseño sobre la velocidad. Esto está destinado al texto principal donde se prefiere una buena tipografía sobre el rendimiento (por ejemplo, cuando se debe minimizar el número de palabras huérfanas).
stable: Da como resultado el mismo comportamiento que wrap, excepto que cuando el usuario está editando el contenido, las líneas que preceden a las líneas que están editando permanecen estáticas en lugar de que todo el bloque de texto se vuelva a ajustar.

Hay dos formas en que el texto puede fluir a través de líneas dentro de un bloque de contenido, como un párrafo (<p>) o encabezados (<h1>–<h6>). Estos son saltos de línea forzados, que son controlados por el usuario, y saltos de línea suaves, que son controlados por el navegador. La propiedad text-wrap se puede usar para indicar al navegador cómo controlar los saltos de línea suaves.

El valor que elija para text-wrap depende de cuántas líneas de texto anticipe estilizar, si el texto es contenteditable (contenido editable), y si necesita priorizar la apariencia o el rendimiento.

Cuando el contenido estilizado se limitará a un número corto de líneas, como títulos, leyendas y citas en bloque, se puede agregar text-wrap: balance para equilibrar el número de caracteres en cada línea, mejorando la calidad y la legibilidad del diseño. Dado que los navegadores limitan el número de líneas afectadas por esta propiedad, el impacto de este valor en el rendimiento es insignificante.

Para secciones de texto más largas, se puede usar text-wrap: pretty. Tenga en cuenta que pretty tiene un efecto negativo en el rendimiento, por lo que solo debe usarse para bloques de texto más largos cuando el diseño es más importante que la velocidad.

El valor stable mejora la experiencia del usuario cuando se usa en contenteditable (contenido que es editable). Este valor asegura que, a medida que el usuario está editando texto, las líneas anteriores en el área que se está editando permanezcan estables.

Definición formal

Valor inicial	`wrap`
Applies to	text and block containers
Heredable	yes
Valor calculado	as each of the properties of the shorthand: `text-wrap-mode`: como se especifica `text-wrap-style`: como se especifica
Animation type	as each of the properties of the shorthand: `text-wrap-mode`: discrete `text-wrap-style`: discrete

Sintaxis formal

text-wrap = 
  <'text-wrap-mode'>   ||
  <'text-wrap-style'>  

<text-wrap-mode> = 
  wrap    |
  nowrap  

<text-wrap-style> = 
  auto           |
  balance        |
  stable         |
  pretty         |
  avoid-orphans

Ejemplos

Comparación de valores básicos de text-wrap

HTML

html

<h2 class="wrap" contenteditable="true">
  El comportamiento predeterminado; el texto en el título se envuelve
  "normalmente"
</h2>

<h2 class="nowrap" contenteditable="true">
  En este caso, el texto en el título no se envuelve y desborda el contenedor
</h2>

<h2 class="balance" contenteditable="true">
  En este caso, el texto en el título está bien equilibrado entre líneas
</h2>

CSS

css

.wrap {
  text-wrap: wrap;
}

.nowrap {
  text-wrap: nowrap;
}

.balance {
  text-wrap: balance;
}

h2 {
  font-size: 2rem;
  font-family: sans-serif;
}

Resultado

El texto en el ejemplo es editable. Cambie el texto, agregando palabras largas, para ver cómo las diferentes longitudes de la línea y las palabras impactan el envoltorio.

Especificaciones

Specification
CSS Text Module Level 4 # text-wrap

Compatibilidad con los navegadores

BCD tables only load in the browser

Véase también

white-space
white-space-collapse
Módulo de texto CSS
CSS text-wrap: balance en developer.chrome.com
CSS text-wrap: pretty en developer.chrome.com