Propiedad white-space

La propiedad white-space establece cómo dividir el texto en una nueva línea, y también cómo mostrar los espacios entre palabras y los saltos de línea (lugares donde se presionó Enter al escribir el código).

Sintaxis

selector {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Valores

Valor	Descripción
`nowrap`	Prohíbe que el texto se divida en otra línea, incluso si no cabe en el ancho del contenedor (en este caso, el texto simplemente se saldrá de sus límites). Sin embargo, agregar la etiqueta `br` obligará al texto a pasar a una nueva línea.
`pre`	El texto se muestra tal como fue escrito en el editor al maquetar el sitio: con todos los espacios y enters (si en el código se escribieron varios espacios, en la pantalla también habrá varios). En este caso, el navegador no dividirá el texto en una nueva línea si no cabe en el contenedor; el texto simplemente se saldrá de sus límites. Análogo a la etiqueta pre, pero a diferencia de ella, no cambia la fuente a monoespaciada (sobre la fuente monoespaciada, véase la propiedad `font-family`.
`pre-wrap`	Lo mismo que pre, la diferencia es que si el texto es demasiado largo y no cabe en el contenedor - el navegador lo dividirá en otra línea.
`pre-line`	El navegador solo tiene en cuenta los Enter en el código HTML e ignora todo lo demás (varios espacios se verán como uno, el navegador coloca los saltos de línea automáticamente).
`normal`	Comportamiento estándar: el navegador coloca los saltos de línea automáticamente para que las palabras quepan en el contenedor. Varios espacios en el código se verán como uno en la pantalla.

Valor por defecto: normal.

Ejemplo . Valor nowrap

En este ejemplo, el texto no cabrá en el contenedor y se saldrá de sus límites, porque se estableció el valor nowrap:

<div id="elem">
	Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Ejemplo . Valor nowrap y etiqueta br

Si se agrega la etiqueta br - el texto pasará a una nueva línea (exactamente en el lugar donde está br):

<div id="elem">
	Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Ejemplo . Valor pre

En este ejemplo, el texto se muestra tal como fue escrito en el editor de código HTML (con todos los espacios de la tecla Tab, con Enter y así sucesivamente):

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre;
	border: 1px solid red;
}

Ejemplo . Valor pre-wrap

Y ahora el texto se muestra tal como fue escrito en el editor de código HTML, sin embargo, las partes que se salen se dividen en una nueva línea:

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre-wrap;
	border: 1px solid red;
}

Véase también

las propiedades word-break y overflow-wrap,
que permiten dividir las letras de una palabra larga en una nueva línea
la propiedad tab-size,
que establece el tamaño de la sangría creada por la tecla Tab
la propiedad hyphens,
que activa la división de palabras por sílabas
la propiedad overflow,
que recorta las partes que se salen de los límites del bloque
la etiqueta pre,
que muestra el texto tal como fue escrito en el editor de código HTML