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.

* Some parts of this feature may have varying levels of support.

La propiedad abreviada de CSStext-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 propiedadeswhite-space-collapse ytext-wrap pueden declararse juntas usando la propiedad abreviadawhite-space.

Pruébalo

text-wrap: wrap;

text-wrap: nowrap;

text-wrap: balance;

text-wrap: pretty;

text-wrap: stable;

<section>  <div>    <p>Edit the text in the box:</p>    <div>      <p contenteditable="">        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem aut        cum eum id quos est.      </p>    </div>  </div></section>

.whole-content-wrapper {  display: flex;  flex-direction: column;  align-items: center;  width: 100%;}#example-element {  border: 1px solid #c5c5c5;  width: 250px;}

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 propiedadtext-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 quewrap, 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 palabrashuérfanas).
stable: Da como resultado el mismo comportamiento quewrap, 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 sonsaltos de línea forzados, que son controlados por el usuario, ysaltos de línea suaves, que son controlados por el navegador. La propiedadtext-wrap se puede usar para indicar al navegador cómo controlar lossaltos de línea suaves.

El valor que elija paratext-wrap depende de cuántas líneas de texto anticipe estilizar, si el texto escontenteditable (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 agregartext-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 usartext-wrap: pretty. Tenga en cuenta quepretty 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 valorstable mejora la experiencia del usuario cuando se usa encontenteditable (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
Percentages	as each of the properties of the shorthand: `text-wrap-mode`: no `text-wrap-style`: no
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 contenteditable="true">  El comportamiento predeterminado; el texto en el título se envuelve  "normalmente"</h2><h2 contenteditable="true">  En este caso, el texto en el título no se envuelve y desborda el contenedor</h2><h2 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.