Propiedad white-space de CSS
La propiedad white-space especifica cómo se maneja el espacio en blanco dentro de un elemento. Un espacio en blanco puede ser una secuencia de espacios o un salto de línea.
Esta propiedad se puede aplicar a cualquier contenido en línea dentro de un elemento.
Los espacios extra especificados se colapsan en uno, los saltos de línea se eliminan y las líneas se rompen y ajustan donde sea necesario para caber dentro de su contenedor.
| Valor inicial | normal |
|---|---|
| Se aplica a | Elementos de nivel en línea y de celda de tabla, también se aplica a ::first-letter y ::first-line. |
| Heredado | No. |
| Animable | Sí. La propiedad white-space es animable. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.whiteSpace = "nowrap"; |
Sintaxis
Sintaxis de la propiedad white-space de CSS
css
white-space: normal | nowrap | pre | pre-line | pre-wrap | break-space | initial | inherit;Ejemplo de la propiedad white-space con el valor "normal":
Ejemplo de la propiedad white-space de CSS con el valor normal
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
white-space: normal;
}
</style>
</head>
<body>
<h2>White-space property example</h2>
<div>
Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</div>
</body>
</html>Resultado
En este ejemplo, el texto se ajusta a la siguiente línea según sea necesario.
Ejemplo de la propiedad white-space con el valor "nowrap":
Ejemplo de la propiedad white-space de CSS con el valor nowrap
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
white-space: nowrap;
}
</style>
</head>
<body>
<h2>White-space property example</h2>
<div>
Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</div>
</body>
</html>Ejemplo de la propiedad white-space con el valor "pre-line":
Ejemplo de la propiedad white-space de CSS con el valor pre-line
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
white-space: pre-line;
}
</style>
</head>
<body>
<h2>White-space property example</h2>
<div>
Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</div>
</body>
</html>En el siguiente ejemplo, puedes ver la diferencia entre los valores "nowrap", "normal" y "pre-wrap".
Ejemplo de la propiedad white-space con tres valores:
Ejemplo de la propiedad white-space de CSS con los valores nowrap, normal y pre-wrap
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.t1 {
white-space: nowrap;
}
p.t2 {
white-space: normal;
}
p.t3 {
white-space: pre-wrap;
}
</style>
</head>
<body>
<h2>White-space property example</h2>
<h3>white-space: nowrap;</h3>
<p class="t1">
Lorem Ipsum is dummy text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</p>
<h3>white-space: normal;</h3>
<p class="t2">
Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</p>
<h3>white-space: pre-wrap;</h3>
<p class="t3">
Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</p>
</body>
</html>Valores
| Valor | Descripción | Ejecutar |
|---|---|---|
| normal | Rompe las líneas según sea necesario para llenar las cajas de línea. Este es el valor predeterminado de esta propiedad. | Ejecutar » |
| nowrap | Con este valor, el texto nunca se ajustará a la siguiente línea. | Ejecutar » |
| pre | Conserva tanto los espacios como los saltos de línea. El texto no se ajustará a la siguiente línea. | Ejecutar » |
| pre-line | Las secuencias de espacios en blanco se colapsan en un solo espacio. El texto se ajustará cuando sea necesario y en los saltos de línea. | Ejecutar » |
| pre-wrap | El navegador conserva los espacios en blanco. El texto se ajustará cuando sea necesario y en los saltos de línea. | Ejecutar » |
| break-space | El mismo comportamiento que "pre-wrap" excepto: - cualquier secuencia de espacios en blanco conservados siempre ocupa espacio, incluso al final de la línea - existe una oportunidad de salto de línea después de cada carácter de espacio en blanco conservado, incluso entre caracteres de espacio en blanco - estos espacios conservados ocupan espacio y no cuelgan, afectando así los tamaños intrínsecos de la caja | |
| initial | Hace que la propiedad use su valor predeterminado. | Ejecutar » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuáles son algunas de las propiedades del valor 'white-space' en CSS?