Espaço em branco - CSS-Tricks

A propriedade de espaço em branco controla como o texto é tratado no elemento ao qual é aplicado. Digamos que você tenha HTML exatamente como este:

 A bunch of words you see.

Você estilizou o div para ter uma largura definida de 100 px. Com um tamanho de fonte razoável, é muito texto para caber em 100 px. Sem fazer nada, o white-spacevalor padrão é normale o texto será quebrado. Veja o exemplo abaixo ou acompanhe em casa a demonstração.

div ( /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; )

Se você quiser evitar que o texto se enrole, você pode aplicar white-space: nowrap;

Observe no exemplo de código HTML no início deste artigo, na verdade, existem duas quebras de linha, uma antes da linha de texto e outra depois, que permitem que o texto fique em sua própria linha (no código). Quando o texto é renderizado no navegador, essas quebras de linha aparecem como se tivessem sido eliminadas. Também eliminados estão os espaços extras na linha antes da primeira letra. Se quisermos forçar o navegador a exibir essas quebras de linha e caracteres de espaço em branco extras, podemos usarwhite-space: pre;

É chamado preporque o comportamento é como se você tivesse embrulhado o texto em

tags (que por padrão lidam com espaços em branco e quebras de linha dessa forma). O espaço em branco é respeitado exatamente como no HTML e o texto não quebra até que uma quebra de linha esteja presente no código. Isso é particularmente útil ao exibir literalmente o código, o que se beneficia esteticamente de alguma formatação (e algum tempo é absolutamente crucial, como em linguagens dependentes de espaço em branco!)

Talvez você goste de como respeita preos espaços em branco e as quebras, mas precisa que o texto seja quebrado em vez de potencialmente sair de seu contêiner pai. É white-space: pre-wrap;para isso:

Finalmente, white-space: pre-line;quebrará as linhas onde elas quebram no código, mas o espaço em branco extra ainda é removido.

Curiosamente, a quebra de linha final não é respeitada. De acordo com a especificação CSS 2.1: “As linhas são interrompidas em caracteres de nova linha preservados e conforme necessário para preencher as caixas de linha.” então talvez isso faça sentido.

Aqui está uma tabela para entender o comportamento de todos os diferentes valores:

	Novas linhas	Espaços e guias	Quebra de texto
normal	Colapso	Colapso	Embrulho
pré	Preservar	Preservar	Sem embrulho
nowrap	Colapso	Colapso	Sem embrulho
pré-embalagem	Preservar	Preservar	Embrulho
pré-linha	Preservar	Colapso	Embrulho

No CSS3, a white-spacepropriedade vai literalmente seguir esse gráfico e mapear as propriedades para text-space-collapsee de text-wrapacordo.

Mais Informações

Mozilla Docs

Suporte para navegador

Um pouco mais complexo do que a tabela de suporte regular, pois cada valor tem diferentes níveis de suporte:

Navegador	Versão	Apoio de
Internet Explorer	5,5	`normal \| nowrap`
	6,0	`normal \| pre \| nowrap`
	8+	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Firefox (Gecko)	1.0 (1.0)	`normal \| pre \| nowrap \| -moz-pre-wrap`
	3,0 (1,9)	`normal \| pre \| nowrap \| pre-wrap \| -moz-pre-wrap`
	3,5 (1,9.1)	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Ópera	4,0	`normal \| pre \| nowrap`
	8,0	`normal \| pre \| nowrap \| pre-wrap`
	9,5	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Safari (WebKit)	1,0 (85)	`normal \| pre \| nowrap`
Safari (WebKit)	3,0 (522)	`normal \| pre \| nowrap \| pre-wrap \| pre-line`