Uma folha de estilo em cascata (CSS) desempenha um papel vital no aprimoramento do conteúdo criado por HTML para formar uma página da web. Uma das propriedades comumente usadas e básicas é adicionar um espaço em branco ou uma nova linha entre, antes ou depois do conteúdo HTML. Usando apenas o HTML, o
é responsável por criar intervalos no conteúdo, mas o CSS tem seus caminhos de estilizar o efeito nos itens do corpo. Neste artigo, veremos como, usando CSS, podemos adicionar uma nova linha no código HTML.

Exemplo 1:
Para implementar o fenômeno de uma quebra de linha, usamos um exemplo simples para elaborar o conceito. Um programa simples primeiro demonstra os textos html sem espaçamento e como é usar o texto no parágrafo ou uma tag de span sem usar os espaços em branco. Primeiro vem a seção corporal do HTML. Um cabeçalho

é adicionado à seção. Então, usando duas tags de extensão, usamos o texto simples para ele. Uma tag de span funciona como o

tag de parágrafo. Feche o corpo HTML. Esta tag não contém o CSS ou qualquer outra tag de conteúdo. Apenas duas linhas são declaradas para obter a saída desejada.

Salve o código do arquivo de texto com uma extensão HTML e execute -o no navegador.

Você verá que as duas frases sem quebra de linha são exibidas, embora elas estejam escritas em linhas separadas. Mas não importa, pois cada linha de span é exibida nas mesmas linhas.

Exemplo 2:
Existe uma propriedade CSS que é aplicada ao conteúdo HTML para adicionar as quebras. É o caractere de retorno do carro (\ a). É subdividido em dois elementos que são “:: antes” e “:: depois” pseudo-elementos mencionados dentro das classes de CSS.

Este é o efeito que é aplicado em ambos os elementos ou usando qualquer um deles. No começo, vamos usar um elemento após o texto. Vamos ver como isso funciona.

Na seção do corpo, o mesmo conteúdo é usado como título e, em seguida, duas tags de extensão são aplicadas. Desta vez, um ID para o CSS é mencionado dentro da etiqueta do span. Este ID aplica todos os efeitos declarados dentro da parte da cabeça do corpo HTML. Agora, feche o corpo. Na seção da cabeça, use as tags de estilo para fazer o CSS interno. Dentro das tags, use o ID que é aplicado e siga o tipo de caráter de retorno de carruagem ":: depois". Dentro desta descrição do ID, usamos a propriedade de conteúdo que é apenas o personagem "\ a". Não causa nada além de uma nova linha para o texto existente. Ao usar isso, as duas frases são exibidas em linhas separadas. Outra propriedade que está escrita na descrição é o "espaço branco". Este espaço em branco é sempre tomado em um pré-tipo.

#Content1 :: After
Conteúdo: "\ a";
Espaço branco: pré;

Este ID de estilo afeta o conteúdo de extensão de tal maneira que duas frases não são exibidas na mesma linha. O elemento "depois" causa um intervalo de uma linha entre duas frases. Como o nome declara, o intervalo é após a primeira linha.

Salve o código e execute -o no navegador para ver a página da web resultante criada.

Você verá que, dessa maneira, criamos uma nova linha usando uma propriedade CSS.

Exemplo 3:
Neste exemplo, usaremos os dois elementos do caráter de retorno de carruagem. Deixe a seção corporal html estar na maneira como estava no exemplo anterior, mas com uma única alteração adicionando um ID do Content2 dentro da etiqueta do segundo período. Isso causa efeitos em ambas as tags de extensão. Há apenas alterações nas tags de estilo da seção da cabeça. O ID do conteúdo1 é o mesmo com o elemento "depois" dentro dele.

Mas o ID do conteúdo2 tem o elemento "antes" do personagem.

#Content2 :: antes
Conteúdo: "\ a";
Espaço branco: pré;

Como mostra a descrição do estilo, o elemento anterior é aplicado ao segundo período. Na primeira extensão, aplicamos o ID do Conto1. Por causa do ID do conteúdo1, o espaço é criado após o primeiro período. Mas, devido ao ID do conteúdo2 com o elemento "antes", o segundo período tem uma nova linha antes da segunda frase. Isso se deve ao elemento "antes" declarado no ID do conteúdo2.

Após a execução, você verá que há uma lacuna de uma linha em branco entre duas frases. O efeito "depois" é aplicado pelo primeiro ID Conten1, enquanto o efeito "antes" é aplicado pelo ID do conteúdo2 coletivamente.

Exemplo 4:
Outro exemplo de uma nova linha CSS é declarada aqui que envolve o uso de uma propriedade CSS na qual o efeito do espaço branco recebe um valor da pré-linha. Este valor pré-linha cria uma lacuna antes do conteúdo HTML ao qual é aplicado. Agora, vamos considerar o seguinte exemplo:

Na seção corporal do HTML, dois títulos,

e

, são dados. Após esses títulos, um parágrafo é declarado com cada palavra em uma linha separada.

Agora, na cabeça, depois de dar o título à página, um CSS interno é aplicado para ter uma tag de estilo. Dentro da etiqueta de estilo, usamos uma tag de parágrafo para aplicar a cor da fonte ao texto junto com a propriedade do espaço branco.

P
Cor laranja;
Espaço branco: pré-linha;

Este código "pré-linha" causa uma linha em branco antes do início do parágrafo.

Após a execução, você verá que o espaço é criado antes do início do parágrafo.

Exemplo 5:
Este exemplo é bem diferente dos exemplos anteriores, porque não apenas usaremos uma nova linha em branco aqui, mas também adicionaremos o novo texto às novas linhas geradas antes. Na seção do corpo, dois títulos são criados -

e

. Depois disso, uma tag de parágrafo é usada para criar o texto de dois parágrafos.

Dentro da seção da cabeça, usamos um parágrafo para o propósito de estilo.

P :: antes
Cor vermelha;
Conteúdo: "Linuxhint \ A"
"Artigo On Line Break";
Exibição: bloco;
Espaço branco: pré

Este efeito inclui a cor da fonte e o conteúdo que queremos adicionar a cada parágrafo após a adição da linha em branco. A propriedade do espaço branco recebe um valor "pré" para adicionar um espaço em branco antes do parágrafo.

Salve o código e execute o arquivo. Você verá que antes de cada parágrafo, uma linha em branco é adicionada e depois disso, o conteúdo é adicionado após o espaço em branco.

Conclusão

A nova linha CSS é uma descrição de criar uma nova linha usando alguns recursos de CSS que são declarados com qualquer recurso HTML. Através dos efeitos do CSS, uma nova linha pode ser adicionada antes, depois ou entre o conteúdo HTML. Implementamos os diferentes exemplos para elaborar brevemente o conceito. No início, um exemplo de um parágrafo html sem espaço é usado. Então, usando o mesmo código, adicionamos uma propriedade CSS do personagem. Um “caractere de retorno de transporte” é usado para adicionar novas linhas entre o conteúdo que declaramos no corpo HTML. Este personagem pode ser adicionado diretamente ou com o novo conteúdo a ser adicionado.