Comment puis-je empêcher les mots longs de briser ma mise en page DIV ?

Empêcher les mots longs de briser votre Div

Lors du passage des mises en page basées sur des tableaux aux mises en page basées sur DIV, un problème courant persiste : le débordement inesthétique de longs mots sur le bord des colonnes DIV. Ce problème touche même les grands sites Web et est particulièrement répandu dans des langues comme l'allemand, où même les mots de tous les jours peuvent être longs.

Solution :

Trait d'union doux

L'utilisation du trait d'union souple (­) vous permet de désigner l'endroit où les navigateurs doivent rester longs mots :

averyvery­longword

Ce caractère permet aux navigateurs de restituer le mot sous la forme «averyverylongword» ou «averyvery-

longword».

Une expression régulière peut aider stratégiquement insertion de traits d'union souples :

/([^\s-]{5})([^\s-]{5})/ → ­

Element

Vous pouvez également injecter l'élément HTML5 élément, un ancien IE-isme :

averyvery<wbr>longword

Cela coupe le mot sans trait d'union, ce qui donne "averyvery

mot long."

Cés d'union CSS

Pris en charge par les dernières versions d'IE, Firefox et Safari (pas Chrome), les traits d'union CSS activent l'automatique césure :

div.breaking {
  hyphens: auto;
}

Notez que cette fonctionnalité repose sur un dictionnaire de césure et ne peut pas toujours séparer les mots longs de manière cohérente.

Débordement et espace blanc : pré-enveloppement

D'autres solutions viables incluent le contrôle du débordement et la définition d'espaces blancs sur pre-wrap :

div.breaking {
  overflow: hidden;
  white-space: pre-wrap;
}

Les deux approches empêchent les mots longs de dépasser la limite du DIV.

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!