Como fazer uma quebra de linha em Javascript

| | | | | | | | | | | |

Quebras de linha podem ser adicionadas a elementos HTML sem ter que usar um retorno de quebra de
usando pseudo-elementos. Pseudo-elementos são usados para modelar uma parte específica de um elemento. Aqui usaremos:: after para estilizar um elemento HTML para adicionar uma quebra de linha.


No código acima, usamos o pseudo-elemento :: after em cada elemento embutido (representado pelo intervalo) para adicionar um retorno de carro (representado por "a") após a linha do intervalo de texto. O :: after neste caso tem uma propriedade content e uma propriedade whitespace disponível para uso.

A propriedade "content" descreve as coisas que queremos injetar na duração. A propriedade de espaço em branco nos diz se devemos preservar o espaço em branco. Deixar essa propriedade específica desabilitada não interfere no recurso de travamento em linha do compartimento. Portanto, precisamos adicionar essa propriedade específica para substituí-la.

À medida que você joga cada vez mais com estilo e layout, provavelmente descobrirá que a solução acima não é necessariamente a melhor solução. Se você adicionar preenchimento de qualquer tipo junto com o plano de fundo, verá que essas propriedades CSS tendem a desaparecer onde o plano de fundo entra. Veja o código de exemplo abaixo que ilustra o ponto:

Professor Dumbledore

Professor McGonagall

Professor Rogue

professor Trelawney

Tem outras soluções que dão resultados semelhantes a este - onde o plano de fundo começa na linha anterior e, em seguida, executa um retorno de carro com o texto de plano de fundo correto na próxima linha. Lembro-me da propriedade CSS box decoration break: clone que pode ser adicionada à classe span acima para obter um resultado semelhante, mas não nos dá o resultado que queremos.

usando elementos no bloqueio como

ou