Comment forcer une rupture de ligne dans un long mot dans un div

Il y a des tables et des boîtes créées via Div dans des documents HTML qui contiennent des informations de texte à l'intérieur. Le problème se pose lorsqu'il y a un grand mot avec un grand nombre de caractères, et pour cette raison, le texte s'écoule du conteneur en négligeant la limite du conteneur.

Propriété CSS Word-Wrap qui formate automatiquement le texte écrit en divisant le long mot en parties en cas de besoin. Le "faire un mot»La propriété déplace les parties du mot vers la ligne suivante en fonction de la taille du conteneur.

Forcer une rupture de ligne dans un long mot dans un div

Ajoutez simplement la propriété Word-Wrap avec la valeur / attribut de mot de pause dans l'élément de style CSS qui fait référence au div.

Syntaxe
La syntaxe exacte pour ajouter la propriété Word-Wrap est la suivante:

Word-Wrap: Break-Word;

Problème: le contenu déborde de la div

Discutons de cela avec l'aide d'un simple exemple de div qui a le texte à l'intérieur avec un long mot:

ithout word-wrap: élément de rupture

L'élément de rupture de ligne dans HTML formats automatiquement le texte écrit en cassant le long mot avec beaucoup de caractères en parties en cas de besoin. Par exemple, s'il y a un veeeeeeeeeeeeeeeeeerrrrrrrrrrrrrrryyyyyyyyyyy long mot

Cela affichera le résultat suivant dans la sortie. Cela semble très problématique car le texte déborde de la div:

Solution: ajout de la propriété «mot-mot»

Maintenant, si nous prenons le même conteneur Div avec le même texte à l'intérieur que ce qui est ajouté ci-dessus dans ce post:

Avec word-wrap: élément de rupture

L'élément de rupture de ligne dans HTML formats automatiquement le texte écrit en cassant le long mot avec beaucoup de caractères en parties en cas de besoin. Par exemple, s'il y a un veeeeeeeeeeeeeeeeeerrrrrrrrrrrrrrryyyyyyyyyyy long mot

Maintenant, dans l'élément de style CSS, il est juste nécessaire de se référer à la classe, ID ou l'attribut DIV dans lesquels le long mot problématique a été écrit et ensuite ajouter la propriété de mot-mot:

.classe2
Word-Wrap: Break-Word;

Ce sera la sortie générée par l'extrait de code ci-dessus. Maintenant, cela semble présentable parce que la propriété Word-Wrap a divisé les caractères de texte en plusieurs lignes plutôt que de déborder du conteneur:

C'est ainsi que nous pouvons forcer une rupture de ligne dans un mot qui a beaucoup de personnages.

Conclusion

Pour forcer une rupture de ligne dans un long mot dans une div de telle manière qu'il déplace les parties des mots vers les lignes suivantes en fonction de la taille du conteneur, il y a une propriété CSS Word-Wrap avec le mot de rupture de valeur. Dans l'élément de style CSS, il est juste nécessaire d'ajouter un sélecteur pour se référer au conteneur div dans lequel le mot est créé, puis écrire la propriété de mot.