texte sortant de div

Lorsque le texte est sans espaces et que la taille du div est supérieure à 200px , la largeur est définie sur 200px. J’ai mis mon code ici http://jsfiddle.net/madhu131313/UJ6zG/ Vous pouvez voir les images ci-dessous: le texte pour aller à la ligne suivante

entrer la description de l'image ici

entrer la description de l'image ici

C’est dû au fait que vous avez un long mot sans espaces. Vous pouvez utiliser la propriété de retour à la ligne pour provoquer la rupture du texte:

#w74 { word-wrap: break-word; } 

Il prend également en charge assez bien le navigateur. Voir la documentation à ce sujet ici .

Utilisation

 white-space: pre-line; 

Cela empêchera le texte de sortir du div . Cela brisera le texte quand il atteindra la fin du div .

Vous devez utiliser le overflow:hidden; ou scroll

http://jsfiddle.net/UJ6zG/1/

ou avec php vous pourriez court-circuiter les longs mots …

utiliser overflow:auto il donnera un scroller à votre texte dans le div :).

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é CSS overflow-wrap spécifie si le navigateur doit ou non insérer 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 pour le break-world

Pour éviter le débordement, les mots normalement incassables peuvent être brisés à des points arbitraires s’il n’y a pas de points de rupture autrement acceptables dans la ligne.

À noter…

La propriété était à l’origine une extension Microsoft non standard et non préfixée 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é en overflow-wrap , avec word-wrap étant un alias.


Si vous vous souciez de la prise en charge des navigateurs existants, il convient de spécifier les deux:

 word-wrap : break-word; overflow-wrap: break-word; 

Ex. IE9 ne reconnaît pas le overflow-wrap mais fonctionne correctement avec le word-wrap

Si cela aide. Ajoutez la propriété suivante avec une valeur à votre sélecteur:

 white-space: pre-wrap; 

J’ai récemment rencontré ceci. J’ai utilisé: display:block;

Si c’est juste une instance qui doit être enveloppée sur 2 ou 3 lignes, j’utiliserais juste quelques dans la chaîne. Il traitera ceux-là comme les autres mais il n’insérera pas le saut de ligne si cela n’est pas nécessaire.

 
adsfadsadsadsfadsadsadsfadsadsadsfadsadsadsfadsadsadsfadsadsadsfadsadsadsfadsadsadsfadsadsadsfadsadsadsfadsadsadsfadsadsadsfadsads adsfadsads

Voici un violon

http://jsfiddle.net/gaby_de_wilde/UJ6zG/37/