Comment puis-je empêcher les mots longs de sortir de mes div ?

Empêcher les longs mots de briser votre div

Dans la transition de la mise en page de table à la mise en page de div, un problème persistant persiste : l'importun extension de mots trop longs au-delà des limites d'une colonne div. Cet événement peut compromettre l'esthétique et le professionnalisme d'un site Web, comme on le voit fréquemment, même sur des sites importants, en particulier ceux proposant des langues avec des termes intrinsèquement longs.

Solution 1 : trait d'union doux

L'insertion d'un trait d'union (­) dans les mots longs permet aux navigateurs de déterminer les points d'arrêt appropriés :

averyvery­longword

Ceci entraîne un rendu comme :

averyverylongword

ou

averyvery-
longword

Solution 2 : Élément

Alternativement, l'élément L'élément peut être utilisé pour indiquer des points de rupture potentiels sans introduire de trait d'union :

averyvery<wbr>longword

Cela coupe le mot proprement au point de rupture :

averyvery
longword

Solution 3 : traits d'union CSS (Non pris en charge par Chrome)

Les traits d'union CSS (activés par les traits d'union : auto ;) sont automatiquement coupés mots basés sur un dictionnaire. Bien que cela puisse améliorer l'apparence du texte justifié, ce n'est pas une solution fiable pour empêcher les mots longs de dépasser les limites div.

Solution rétrospective : display: table-cell

Malgré sa dépréciation à des fins de mise en page, l'affichage : table-cell; La propriété peut toujours être appliquée à d'autres éléments, imitant le comportement extensible des cellules de tableau, qui se développent dynamiquement pour accueillir des mots longs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!