Chérie, ça va couper !
Les spécifications CSS3 apportent leur lot de propriétés et techniques pour gérer les césures et coupures des mots longs.
Certaines de ces propriétés sont déjà reconnues par les navigateurs actuels et par conséquent tout à fait utilisables en production. Intéressons-nous à deux d’entre-elles : word-wrap et hyphens
Word-wrap : la césure “barbare”
Word-wrap est une propriétés très ancienne, inventée par Microsoft puis introduite dans la norme CSS3. Elle est supportée par tous les navigateurs (IE6 compris).
Son principe est de couper simplement et sans fioritures les textes qui débordent de leur conteneur. En clair, dès que ça dépasse, on passe à la ligne. C’est plutôt pratique pour éviter les débordements inopinés, notamment sur des petites résolutions ou des mobiles.
Son seul inconvénient est qu’il n’est pas possible d’intervenir dans les choix de coupe et que le résultat, par conséquent, n’est pas toujours très satisfaisant.
Hyphens : la césure “propre”
La propriétés hyphens n’est supportée que par quelques rares navigateurs actuellement (Firefox 6 ou 8 selon les langues, IE10, Safari 5.1)
Elle va bien plus loin que word-wrap puisque la césure est “intelligente” (elle s’adapte aux règles typographiques de la langue employée) et affiche des traits d’union.
Elle est donc bien pratique, mais encore assez peu supportée (elle nécessite d’ailleurs des préfixes vendeurs).
Le combo Hyphens + Word-wrap
La solution, en attendant un bon support navigateur, pourrait tout simplement se résumer en une combinaison des deux propriétés : les navigateurs reconnaissant hyphens l’appliqueront en priorité; les autres disposeront de l’alternative word-wrap un peu moins sexy.
Qu’en pensez-vous ?
