CSS é uma folha de estilo em cascata que fornece propriedades diferentes para elementos HTML para fins de estilo. Existem centenas de propriedades, como alinhamento de texto, borda, margem, preenchimento, largura, altura e muito mais. Ao escrever um grande parágrafo em HTML, pode haver espaço indesejado entre o texto, ou às vezes é necessário para exibir o texto de uma maneira específica. Nesse cenário, utilize o CSS “espaço branco”Propriedade para controlar espaços brancos dentro do texto.

Neste manual, a propriedade CSS White-Space será discutida com exemplos. Então vamos começar!

O que é a propriedade CSS White-Space?

O CSS “espaço branco”A propriedade lida com os espaços brancos dentro do elemento.

Sintaxe

A sintaxe da propriedade do espaço em branco é mencionado abaixo. Você pode atribuir um valor de acordo com suas preferências:

Espaço Branco: NowRap | Pré-Wrap | Normal | Inicial | Irito | Pré | Pré-linha;

Então, antes de nos apressarmos na discussão, vamos aprender sobre os valores associados a esta propriedade um por um!

Espaço branco: Nowrap

A propriedade do espaço branco com o valor “Nowrap”Descanse os espaços brancos em uma linha. Ele elimina a linha quebra na fonte e nunca envolve texto. Além disso, o texto continua até a ocorrência do
marcação.

Exemplo

Vamos mudar para o exemplo prático, no qual escreveremos alguns parágrafos. Estes são então aplicados com a propriedade do espaço branco com seus valores diferentes e veja seus resultados.

Html

Dentro do elemento corporal do arquivo html:

• Adicione uma div com o nome da classe “recipiente”.
• Então, adicione

  tag e

  Tag com uma classe chamada “cabeçalho”.

• Depois disso, um

  A tag é colocada para adicionar um parágrafo na página da web.

Observação: Para conferir o funcionamento de diferentes valores de propriedades do espaço em branco, colocamos espaços brancos dentro do parágrafo:

A propriedade do espaço branco

Espaço branco: Nowrap:

Nós somos um time. Trabalhamos juntos para uma missão comum. Nós somos um time.
Trabalhamos juntos para uma missão comum. Nós somos um time.

Dentro da etiqueta da cabeça do HTML, adicione a tag.

CSS

corpo
Background-Color: #A9B6EB;

O "cor de fundo”A propriedade é utilizada para definir a cor de fundo do elemento corporal.

Estilo “contêiner” div

.contêiner
Altura: 200px;
Cor: RGB (19, 1, 56);

Aqui está a descrição do código fornecido:

• ““.recipiente”Indica o recipiente de classe div, no qual o“.”O sinal é referido como seletor de classe.
• ““altura”Propriedade define a altura do elemento para 200px.
• ““cor”Propriedade especifica a cor da fonte.

Classe de estilo “cabeçalho”

.cabeçalho
Alinhamento de texto: centro;

Em seguida, adicione algumas propriedades de estilo aos títulos H1 e H2 que são explicados abaixo:

• ““.cabeçalho”É utilizado para acessar a classe de

  e

  elementos.

• ““alinhamento de texto”Propriedade com o valor definido como“Centro”Centralizará o texto.

Classe de estilo “A”

.a
Espaço branco: Nowrap;

• ““.a”Refere -se à classe do parágrafo.
• ““espaço branco”Propriedade com o valor definido como“Nowrap”Irá colapso em todos os espaços brancos.

Como podemos ver na tela de saída abaixo do rumo. O valor do NowRAP desmaiou todos os espaços brancos do parágrafo, e o texto não está envolvido:

Espaço branco: normal

É o valor padrão da propriedade do espaço branco. Ele cai os espaços brancos em um único personagem e envolve o texto na próxima linha quando necessário.

Sintaxe

No CSS, atribua o valor “normal”Para a propriedade do espaço branco:

Espaço branco: normal;

Pode -se observar que os espaços brancos são desmoronados e o texto é embrulhado. As linhas são quebradas para preencher o espaço abaixo:

Espaço Branco: Pre

A sequência espacial é preservada e as linhas são quebradas quando o personagem de nova linha é atendido ou em
. Mais especificamente, o “pré”O valor preserva quebras de linha e espaços.

Sintaxe

Para utilizá-lo, atribua o valor pré-propriedade à propriedade do espaço branco, conforme mencionado abaixo:

Espaço branco: pré;

Saída

Espaço branco: pré-linha

Enquanto usa o “pré-linha”Os espaços brancos são desmoronados e as linhas são quebradas em caracteres newline, em
marcação. Além disso, também envolve o texto,

Sintaxe

No CSS, a propriedade do espaço em branco receberá o valor atribuído, conforme mencionado abaixo:

Espaço branco: pré-linha;

Ao definir o valor pré-linha para a propriedade do espaço branco, o resultado será assim:

Espaço branco: herdado

O valor que "herdar”Indica que esta propriedade deve herdar o valor de seu elemento pai.

Sintaxe

Aqui está a sintaxe para especificar o valor da propriedade do espaço branco como herdado:

Espaço branco: herdado;

O código acima resultará como mostrado na imagem abaixo:

Espaço Branco: pré-escravo

O "pré-escravo”Value preserva os espaços, guias e newline. Também envolve o texto.

Sintaxe

Espaço Branco: pré-escravo;

Saída

Espaço branco: inicial

““inicial”Indica que a propriedade CSS deve ser definida como seu valor padrão. Este valor pode ser atribuído à propriedade do espaço branco da seguinte forma:

Espaço branco: inicial;

Saída

Dica de bônus

No CSS, existem outros valores de propriedades em espaço branco que você pode explorar ainda mais:

• Espaço branco: reverta
• Espaço branco: camada de reversão
• Espaço branco: espaços brancos
• Espaço Branco: Sem Seto

Aprendemos os vários valores de propriedades do espaço branco e seu uso.

Conclusão

No CSS, o “espaço branco”Propriedade define como lidar com os espaços brancos dentro de um elemento. Por exemplo, às vezes um código -fonte de documento é escrito de uma maneira que não é para renderização final. Precisa de algum recuo e espaços. Para defini-los de acordo, o CSS nos permite usar a propriedade do espaço branco com valores diferentes. Neste artigo, explicamos os valores da propriedade do espaço branco e seu comportamento com exemplos.