Savez vous comment faire pour forcé le retour à la ligne d'un texte dans un div, car j'ai un div de taille max-width de 510px mais si j'entre un mot super grand, celui çi va débordé du div mais je voudrais forcé un retour à la ligne dans ce cas, est ce faisable en CSS ou faut-il passer par un script ?
J'ai trouver cette proprité (par contre je n'arrive pas bien à la faire marcher). Essaie et dit si ça marche
white-space normal : le passage à la ligne est automatique (par défaut)
nowrap : pas de passage à la ligne automatique, à moins qu'une balise xHTML comme <br /> ne soit présente.
pre : le passage à la ligne se fait tel que le texte a été saisi dans le code source (comme la balise xHTML <pre>)
Bonsoir, je lis par hasard ce message, bien tard mais parfois les problèmes demeurent longtemps sans bonne solution
lorsque le texte devient long dans certaines traductions (russe par exemple) la césure des mots est souvent obligatoire.
Dans ce cas si l'on veut être très propre on développe un template qui tient compte des langues par groupe de langues avec un css par groupe.
Ici le paramètre adapté est "word-wrap:break-word;"
Quant a "white-space" il permet de plier le texte en générant des retours à la ligne lors de l'apparition des blancs;
Evidemment si le mot est plus long que le ligne on va dans le décor.
White-space: normal et nowrap ne permettent pas de forcer un retour ligne lorsque il est face à une suite de caractères sans espace: Dans ce cas la taille de l'élément conteneur augmente forcément.
D'ailleurs, cela revient même à ne rien préciser (dans le cas où l'élément n'hérite pas des propriétés parentes), car c'est équivalent à {white-space:normal} par défaut.
This property controls the line breaking behavior within words. It is especially useful in cases where multiple languages are used within an element.
Example
div { word-break: keep-all }
<div style="word-break: keep-all">Western character set content mixed with a some Asian char content.</div>
Possible Values
normal Normal line breaking behavior for the language is used.
break-all Useful where content contains a majority of Asian character set content, to which this value behaves like `normal'. Non-Asian character set content may be arbitrarily broken across lines.
keep-all Useful where content contains a minority of Asian character set content, to which content is not broken across lines. For non-Asian character set content, this value behaves like `normal'.
Je cherche à faire un retour à la ligne automatique dans un div
tel que l'a expliqué l'auteur de ce post.
Le paramètre "word-wrap:break-word;" est adapté pour Internet Explorer 8.0 mais pas pour la version 3.0.14 de Firefox.
Y a t'il un code qui puisse être compatible pour les 2 navigateurs pour faire un retour à la ligne automatique?
Salut à tous,
Le retour ne se fera que s'il y a un blanc, je m'explique:
- Si le mot est long (ils ne sont pas si nombreux que ça dans la langue française, anticonstitutionnellement est le plus grand à ma connaissance), il rentre dans le div ou il ne rentre pas. Dans ce cas la dimension de la div trop petite pour le nombre de caractères. Si anticonstitutionnellement n'entre pas dans ta div, c'est que tu a choisi une police trop grande, une taille de police trop grande. Donc tu réduis la taille de ta police ou tu agrandi la largeur de ta div.
- Si ce mot long est précédé d'autres mots, il devrait normalement s'afficher en dessous des autres (ceux qui le précède).
Le retour à la ligne, dans un div, est automatique. Si ce n'est pas le cas, c'est que ton mot est trop long par rapport à la largeur du div.
Je ne sais pas si je me fais comprendre....
Mais 510px c'est déja assez grand pour qu'un mot, même long, entre dedans.
Ou alors tu parle des blancs inégaux sur la partie droite du div ? Car le texte est aligné à gauche.
Si tu choisi une justification du texte, les blancs à droites seront tous égaux mais ce seront les espaces entre les caractères qui seront modifiés (et ça fera très vilain à l'affichage).
Le bonheur est la seule chose que l'on peut donner sans l'avoir.
rien à voir, et si tu veux poster un lien, n'oublions pas que les messages ne sont pas forcément des mots. Les gens sont un peu foufou, et si c'est une suite de nombre ou bien...?
C'est quand même terrible les gens qui parce qu'ils sont incultes ne répondent pas à la question et se permettent de juger la personne qui pose la question. "si ton mot ne rentre pas dans ton div c'est que ta police est trop grande ou ton div trop petit".? Faut vraiment être barge pour écrire des conneries pareilles.
Répondez à la question ou ne répondez pas.
Sache Txiki quen informatique, il faut avoir l'esprit large, car tous les contenue que l'on affiche ne sont pas forcement des mots de la langue française.
ex pour le quel je suis tombé sur cette discussion: une expression régulière de mail:
CutMail('^([a-z 0-9 A-Z]{1,}([\- \. \_]{1}[a-z 0-9 A-Z]{1,}){0,}){1,}\@([a-z 0-9 A-Z]{1,}([\- \. \_]{1}[a-z 0-9 A-Z]{1,}){0,}){1,}(\.(net|com|edu|fr|us|tw|en|gb|de|ze|be|su)){1,}$', document.forms[0].email.value);
De plus, en constant que l'interface du site a permise que l'éxpresion sans espace c'est cassé au bon endroit pour faire un retour à la ligne, j'ai regardé le css de la page qui contien la solution pour forcer un retour chariot:
- word-wrap: break-word;
Merci aux développeur de "Comment ça marche": Comme ça!
Au prochain qui lira ce sujet, " word-wrap: break-word; " ne fonctionne pas sur les td d'un tableau. Il suffit de mettre une div (avec un max-width) dessous.
réponse tardive mais si cela peut aider , une solution un peu barbare pouvant être un peut long suivant la taille du text :
//passage du texte dans un tableau
$liste= explode(" ", $text);
$nbrechar=70;
$refac=null;
foreach ($liste as $key => $value)
{
//contrôle de de taille de chaque mot si supérieur à la taille définis
if(strlen($value)>$nbrechar)
{
//On le coupe en plusieurs mots de taille définis et ajoute des sauts à la ligne entre.
$refac.=wordwrap($value, $nbrechar, "<br/>",true);
}
else{
$refac.=' '.$value;
}
}
Heuuuu nop ça ne fonctionne pas...
Ce que je voudrais c'est que lorsque le mot est trop grand pour être affiché dans mon div je voudrais qu'il ce coupe à la limite du div et affiche le reste à la ligne d'en dessous.
Je sais pas si c'est assez clair... :x
word-break
break-all apparalent, la non séparartion des mots entiers par défaut, est due au langue Chinois, dont (à ce que j'ai cru compdre) les signes change le sens du mot lorsqu'il sont séparés. (j'admets que c'est flou, mais je ne vois pas d'autre expliciation)
D'ailleurs, cela revient même à ne rien préciser (dans le cas où l'élément n'hérite pas des propriétés parentes), car c'est équivalent à {white-space:normal} par défaut.
C'est: WORD-BREAK
This property controls the line breaking behavior within words. It is especially useful in cases where multiple languages are used within an element.
Example
div { word-break: keep-all }
<div style="word-break: keep-all">Western character set content mixed with a some Asian char content.</div>
Possible Values
normal Normal line breaking behavior for the language is used.
break-all Useful where content contains a majority of Asian character set content, to which this value behaves like `normal'. Non-Asian character set content may be arbitrarily broken across lines.
keep-all Useful where content contains a minority of Asian character set content, to which content is not broken across lines. For non-Asian character set content, this value behaves like `normal'.
Merci beaucoup