Come forzare una linea di linea in una lunga parola in un div

Ci sono tabelle e caselle create tramite Div nei documenti HTML che contengono informazioni di testo all'interno. Il problema sorge quando c'è una grande parola con un numero enorme di caratteri e, per questo, il testo fluisce dal contenitore che trascura il confine del contenitore.

Proprietà CSS Word-Wrap che forma automaticamente il testo scritto rompendo la parola lunga in parti quando necessario. IL "Word-Wrap"La proprietà sposta le parti della parola alla riga successiva in base alle dimensioni del contenitore.

Forzando una rottura di linea in una lunga parola in un div

Basta aggiungere la proprietà di Word-Wrap con il valore/attributo della parola di pausa nell'elemento in stile CSS che si riferisce al div.

Sintassi
La sintassi esatta per aggiungere la proprietà Word-Wrap è la seguente:

Word-Wrap: Break-Word;

Problema: il contenuto trabocca il div

Discutiamolo con l'aiuto di un semplice esempio di div che ha il testo all'interno con una lunga parola:

Non worro-wrap: Break-Word Element

L'elemento di interruzione della linea in HTML formatta automaticamente il testo scritto rompendo la parola lunga con molti caratteri in parti quando necessario. For instance, if there is a veeeeeeeeeeeeeeeeerrrrrrrrrrrrrrrryyyyyyyyyyyyy long word

Questo visualizzerà il seguente risultato nell'output. Questo sembra molto problematico poiché il testo è traboccante dal div:

Soluzione: aggiunta di proprietà "word-wrap"

Ora, se prendiamo lo stesso contenitore Div con lo stesso testo all'interno di sopra in questo post:

Con Word-Wrap: Break-Word Element

L'elemento di interruzione della linea in HTML formatta automaticamente il testo scritto rompendo la parola lunga con molti caratteri in parti quando necessario. For instance, if there is a veeeeeeeeeeeeeeeeerrrrrrrrrrrrrrrryyyyyyyyyyyyy long word

Ora, nell'elemento in stile CSS, è solo necessario fare riferimento alla classe Div, all'ID o all'attributo in cui è stata scritta la lunga parola problematica e quindi aggiungere semplicemente la proprietà di Word-Wrap:

.class2
Word-Wrap: Break-Word;

Questo sarà l'output generato attraverso lo snippet di codice sopra. Ora, questo sembra presentabile perché la proprietà Word-Wrap ha diviso i caratteri del testo in più righe piuttosto che traboccare dal contenitore:

È così che possiamo forzare una rottura di riga in una parola che ha molti personaggi.

Conclusione

Per forzare una linea di linea in una lunga parola in un div in modo tale da spostare le parti delle parole alle righe successive in base alla dimensione del contenitore, esiste una proprietà Word-wrap CSS con il valore di pausa. Nell'elemento in stile CSS, è solo necessario aggiungere un selettore per fare riferimento al contenitore Div in cui viene creata la parola e quindi scrivere la proprietà di Word-Wrap.