Gérer les débordements de contenus grâce à CSS

N’étant pas un média paginé et figé comme le média d’impression, le monde du Web ne permet pas à nous l’intégrateur d’être maitre des contenus surtout avec le développement des CMS.

Nous ne décidons pas de qu’il y aura dans notre contenu et il va falloir nous y faire, on essaye juste de canaliser les caprices de nos contributeurs…

debordement

Overflow: hidden : Solution en cas d’urgence seulement !

La propriété CSS2 overflow a été conçue pour administrer les débordements d’éléments au sein d’un bloc.

Pour canaliser les débordements d’éléments, overlow va nous aider à cacher les éléments en trop, présent depuis CSS2 tous les navigateurs le supporte

Mais cette propriété est un peu borné : avec la valeur hidden, le contenu sera seulement masqué. et avec les valeurs scroll ou auto, des barres de défilement apparaissent ce qui est parfois très laid.

Mise en œuvre :

cesure

Vu, cet exemple on peut dire que notre solution n’est pas le mieux adapter à la situation, passons à autre chose

La propriété word-wrap avec un retour à la ligne forcé

Pour éviter les débordements d’un mot plus large que la dimension définie dans un texte de contenu, la propriété word-wrap permet de réaliser un retour à ligne forcé. Cette propriété CSS3 est appliquée au parent pour permettre le coupage d’un mot à un endroit afin que celui-ci soit forcé de descendre à la prochaine ligne.

La propriété word-wrap admet deux valeurs : normal par défaut, et break-word :

Au niveau de la compatibilité, cette propriété étant définies dans les spécifications CSS3 est supportée depuis la version 5.5 d’IE puisqu’il s’agit d’une propriété créée par Microsoft. Pour le cas de Firefox, word-wrap n’est reconnue qu’à partir de la version 3.5 ce qui fait d’elle une propriété peu connue et peu utilisée.

Pour conclure cette gestion des débordements de contenu, il faut que vous sachiez que la propriété word-wrap ne nécessite aucun préfix vendeur étant donné que celle-ci est une propriété finalisée.

Répondre