[résolu] Comment faire un wordwrap en css (alternative à overflow )

Bonjour a tous,

Je cherche a savoir comment faire pour éviter que du texte sorte de son cadre, sans pour autant utiliser un overflow: auto ?

pour l'instant j'utilise l'overflow ( exemple ici ) mais j'aimerais un retour à la ligne plutot que la scrollbar horizontale !

merci d'avance
Modifié par moogli (05 Dec 2005 - 21:23)

bonjour,
il n'y a qu'avec IE que tu peut "casser" tes mots.

word-wrap: break-word;

ces attribut css sont de chez IE
Tu ne peut donc pas faire autrement que d'utiliser la fonction: wordwrap en php.
Ce n'est pas (encore ?) possible en css.
a plus

si tu enisages un retour à la ligne, le cadre doit pouvoir suivre le contenu (donc une largeur définie et une hauteur non-définie...)???? je suis à côté là ?

Bonsoir

Tu as essayé d'appliquer du % sur ta police.

@+

Bonjour,

Tout d'abord, il est plus simple d'utiliser des blocs <pre> plutôt que des <div> simulant ceux-ci.

D'autre part :

word-wrap ne servira pas à grand-chose ici. Au passage, c'est effectivement à l'origine une extension CSS Microsoft, mais elle a été intégrée dans CSS3 text. Elle n'est cependant implémentée ni par Firefox, ni par Opera (Quelqu'un peut-il confirmer pour Safari/Konqueror ?)

Pour éviter le débordement, il faudrait utiliser white-space: pre-wrap, qui provoquera des retours à la ligne si nécessaire, tout en conservant les indentations éventuelles des exemples de code. Malheureusement, il n'est supporté actuellement que par Opera.

L'overflow:auto, quant à lui, ne rend pas les blocs de code beaucoup plus agréables à lire que le débordement des fins de lignes à droite. Dans tous les cas, en effet, il faudra utiliser le scroll : celui du navigateur ou celui du bloc... Autant ne pas réduire la zone d'affichage et ne pas surcharger celle-ci avec des barres de scroll internes

Conclusion : laisser le texte déborder à droite . Quand il ne risque pas de chevaucher une autre colonne de texte, c'est encore le moins gênant pour l'utilisateur.

Merci a tous d'avoir répondu.

Pour le wordwrap php, ce qu'il me gène c'est que la césure est faite tous les X caractères et nom par nom ( doc de wordwrap

je n'utilise pas de div mais <code>, qui je pense est apprioprié, bien qu'il est vrai je ne connaisse pas la différence sémentique avec pre !

Ce qui me gêne c'est que le validateur me donnais des `avertissement` sur les éléments sans background, j'ai donc ajouter des background-color: inherit; afin de ne pas avoir a changer la coleur partout si j'ai envie de modifer les couleurs. Mais il y a le fond qui suis ( donc gris au milieu de blanc sur la droite ) !

Je pense que mon problème est du au fait que j'ai des ligne très longue sans espaces parce que ceux ci sont remplacer par des &nbsp; dans le source ( est ce que cela peut géner ? ).


Je pense que la solution est peut etre comme ici avec le cadre code qui s'étire a droite avec le texte plutot que le texte qui sorte de celui ci !

chankalan : c'est déja le cas
Michel : j'avoue que non, je vais essayé
Laurent : merci pour toute tes explications.

Je vais donc essayer tous ça ou chercher a donner une largeur minimal a ma balise et qu'elle puisse s'étirer a droite !

@+

j'ai résolu le problème en remplaçant les &nbsp; par des espaces !

merci

@+