Como forçar uma quebra de linha em uma palavra longa em uma div

Existem tabelas e caixas criadas através da div em documentos HTML que contêm informações de texto dentro. O problema surge quando há uma palavra grande com um grande número de caracteres e, por causa disso, o texto flui para fora do contêiner, negligenciando o limite do contêiner.

Propriedade de Word-Wrap CSS que formata o texto escrito automaticamente, dividindo a palavra longa em partes quando necessário. O "quebra de linha”Propriedade move as partes da palavra para a próxima linha de acordo com o tamanho do contêiner.

Forçando uma quebra de linha em uma longa palavra em uma div

Basta adicionar a propriedade Word-Wrap com o valor/atributo do Break Word no elemento de estilo CSS que se refere à div.

Sintaxe
A sintaxe exata para adicionar a propriedade Word-Wrap é a seguinte:

Word-wrap: Break-Word;

Problema: o conteúdo transborda da div

Vamos discutir isso com a ajuda de um exemplo simples de uma div que tem o texto dentro com uma palavra longa:

ITHOUT Word-Wrap: Break-Word Element

O elemento de quebra de linha nos formatos html o texto escrito automaticamente quebrando a palavra longa com muitos caracteres em partes quando necessário. Por exemplo, se houver um veeeeeeeeeeeeeeeeeeerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrhyyyyyyyyyyy word

Isso exibirá o seguinte resultado na saída. Isso parece muito problemático, pois o texto está transbordando da div:

Solução: Adicionando propriedade "Word-wrap"

Agora, se pegarmos o mesmo contêiner de div com o mesmo texto dentro do adicionado acima neste post:

Com enbrágio de palavras: elemento da palavra quebrou

O elemento de quebra de linha nos formatos html o texto escrito automaticamente quebrando a palavra longa com muitos caracteres em partes quando necessário. Por exemplo, se houver um veeeeeeeeeeeeeeeeeeerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrhyyyyyyyyyyy word

Agora, no elemento de estilo CSS, é necessário apenas se referir à classe DIV, ID ou atributo no qual a longa palavra problemática foi escrita e, em seguida, basta adicionar a propriedade Word-Wrap:

.Class2
Word-wrap: Break-Word;

Esta será a saída gerada através do trecho de código acima. Agora, isso parece apresentável porque a propriedade Word-Wrap dividiu os caracteres de texto em várias linhas, em vez de transbordar do contêiner:

É assim que podemos forçar uma quebra de linha em uma palavra que tem muitos personagens.

Conclusão

Para forçar uma quebra de linha em uma palavra longa em uma div, de tal maneira que mova as partes das palavras para as próximas linhas de acordo com o tamanho do contêiner, existe uma propriedade CSS Word-Wrap com o valor que. No elemento de estilo CSS, é necessário adicionar um seletor para se referir ao contêiner Div no qual a palavra é criada e depois escreva a propriedade Word-Wrap.