logo

Como quebrar texto em CSS?

CSS quebra de linha propriedade é usada para quebrar as palavras longas e passar para a próxima linha. Esta propriedade é usada para evitar estouro quando uma string inquebrável é muito longa para caber na caixa que a contém.

Esta propriedade define as quebras na palavra para evitar o estouro quando uma palavra é muito longa para caber no contêiner. Especifica a quebra de palavras quando o conteúdo excede o limite do contêiner.

Sintaxe

 word-wrap: normal | break-word | initial l inherit ; 

Valores

normal: É o valor padrão usado para quebrar palavras apenas em pontos de interrupção permitidos.

palavra de quebra: É usado para quebrar palavras inquebráveis.

inicial: É usado para definir a propriedade com seu valor padrão.

herdar: Ele herda a propriedade de seu elemento pai.

Exemplo

 .test { width: 200px; background-color: lightblue; border: 2px solid black; padding: 10px; font-size: 20px; } .test1 { width: 11em; background-color: lightblue; border: 2px solid black; padding: 10px; word-wrap: break-word; font-size: 20px; } <p> In this paragraph, there is a very long word: iamsooooooooooooooooooooooooooooooolongggggggggggggggg. The long word will break and wrap to the next line. </p> 
Teste agora

Saída

Como quebrar texto em CSS