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
.
Pruébalo
Propiedades constituyentes
Esta propiedad es una abreviatura de las siguientes propiedades de CSS:
Sintaxis
/* 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.
Descripción
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:
|
Animation type | as each of the properties of the shorthand:
|
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
<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
.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