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 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.

PruÃ©balo

text-wrap: wrap;

text-wrap: nowrap;

text-wrap: balance;

text-wrap: pretty;

text-wrap: stable;

<section class="default-example" id="default-example">
  <div class="whole-content-wrapper">
    <p>Edit the text in the box:</p>
    <div class="transition-all" id="example-element">
      <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 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
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 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.