Propriedade white-space

A propriedade white-space define como quebrar o texto em uma nova linha, e também como exibir os espaços entre palavras e as quebras de linha (lugares onde a tecla Enter foi pressionada durante a digitação do código).

Sintaxe

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

Valores

Valor	Descrição
`nowrap`	Impede que o texto quebre para uma nova linha, mesmo que não caiba na largura do contêiner (neste caso, o texto simplesmente ultrapassará suas bordas). No entanto, adicionar a tag `br` forçará o texto a quebrar para uma nova linha.
`pre`	O texto é exibido exatamente como foi digitado no editor durante a criação do site: com todos os espaços e enters (se vários espaços foram digitados no código, vários serão exibidos na tela). Neste caso, o navegador não quebrará o texto para uma nova linha se ele não couber no contêiner - o texto simplesmente ultrapassará suas bordas. Análogo à tag pre, mas diferentemente dela, não altera a fonte para monoespaçada (sobre fonte monoespaçada, veja a propriedade `font-family`.
`pre-wrap`	O mesmo que pre, a diferença é que se o texto for muito longo e não couber no contêiner - o navegador o quebrará para uma nova linha.
`pre-line`	O navegador considera apenas os Enters no código HTML e ignora todo o resto (vários espaços serão exibidos como um único, o navegador insere as quebras de linha automaticamente).
`normal`	Comportamento padrão: o navegador insere as quebras de linha automaticamente para que as palavras caibam no contêiner. Vários espaços no código serão exibidos como um único na tela.

Valor padrão: normal.

Exemplo . Valor nowrap

Neste exemplo, o texto não caberá no contêiner e ultrapassará suas bordas, pois foi definido o valor nowrap:

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

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

Exemplo . Valor nowrap e a tag br

Se a tag br for adicionada - o texto quebrará para uma nova linha (exatamente no local onde o br está):

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

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

Exemplo . Valor pre

Neste exemplo, o texto é exibido da forma como foi digitado no editor de código HTML (com todos os recuos feitos com a tecla Tab, com Enter e assim por diante):

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

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

Exemplo . Valor pre-wrap

Agora o texto é exibido como foi digitado no editor de código HTML, no entanto, as partes que ultrapassam são quebradas para uma nova linha:

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

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

Veja também

as propriedades word-break e overflow-wrap,
que permitem quebrar as letras de uma palavra longa em uma nova linha
a propriedade tab-size,
que define o tamanho do recuo criado pela tecla Tab
a propriedade hyphens,
que ativa a hifenização de palavras por sílabas
a propriedade overflow,
que corta as partes que ultrapassam a borda do bloco
a tag pre,
que exibe o texto da forma como foi digitado no editor de código HTML