texte sortant de div
Quand le texte est sans espaces et plus que la taille de la div 200px c'est coulant La largeur est définie à 200px J'ai mis mon code ici http://jsfiddle.net/madhu131313/UJ6zG/ Vous pouvez voir les images ci-dessous éditées : Je veux que le texte passe à la ligne suivante
C'est dû au fait que vous avez un long mot sans espaces. Vous pouvez utiliser la propriété Word Wrap pour provoquer la rupture du texte:
#w74 { Word-wrap: break-Word; }
Il supporte également assez bien le navigateur. Voir la documentation à ce sujet ici .
Utilisation
white-space: pre-line;
Cela empêchera le texte de sortir de la div. Cela cassera le texte quand il atteindra la fin de la div.
Vous devez utiliser overflow:hidden; ou scroll
ou avec php vous pourriez raccourcir les mots longs ...
Vous devez appliquer la propriété CSS suivante au bloc conteneur (div):
overflow-wrap: break-Word;
Selon les spécifications (source CSS | MDN ):
La propriété
overflow-wrapCSS spécifie si le navigateur doit insérer ou non des sauts de ligne dans les mots pour empêcher le texte de déborder de sa zone de contenu.
Avec la valeur définie sur break-world
Pour éviter tout débordement, des mots normalement incassables peuvent être cassés à des points arbitraires s'il n'y a pas de points de rupture acceptables dans la ligne.
À noter...
Cette propriété était à l'origine une extension Microsoft non standard et sans préfixe appelée
Word-wrap, et a été implémentée par la plupart des navigateurs portant le même nom. Il a depuis été renommé enoverflow-wrap, avecWord-wrapétant un alias.
Si vous vous souciez du support des navigateurs hérités, il est utile de spécifier les deux:
Word-wrap : break-Word;
overflow-wrap: break-Word;
Ex. IE9 ne reconnaît pas overflow-wrap mais fonctionne correctement avec Word-wrap
utilisez overflow:auto cela donnera une défilement à votre texte dans la div :).
Si cela aide. Ajoutez la propriété suivante avec valeur à votre sélecteur:
white-space: pre-wrap;
j'ai récemment rencontré cela. J'ai utilisé: display:block;