texte sortant de div

Quand le texte est sans espaces et plus que la taille div 200px il s'écoule La largeur est définie comme 200px J'ai mis mon code ici http://jsfiddle.net/madhu131313/UJ6zG/ Vous pouvez voir les images ci-dessous éditées : Je veux le texte pour aller à la ligne suivante

Cela est dû au fait que vous avez un mot long sans espaces. Vous pouvez utiliser la word-wrappropriété pour provoquer la rupture du texte:

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

Il a également une assez bonne prise en charge du navigateur. Consultez la documentation à ce sujet ici .

Utilisation

white-space: pre-line;

Cela empêchera le texte de sortir du div. Il cassera le texte à la fin du fichier div.

Vous devez utiliser overflow:hidden; ouscroll

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

ou avec php, vous pouvez 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 overflow-wrappropriété CSS 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 sur break-word

Pour éviter tout débordement, des mots normalement incassables peuvent être interrompus à 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 sans préfixe appelée word-wrap, et a été implémentée par la plupart des navigateurs du même nom. Il a depuis été renommé en overflow-wrap, word-wrapétant un alias.

Si vous vous souciez de la prise en charge des anciens navigateurs, il vaut la peine de spécifier les deux:

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

Ex. IE9 ne reconnaît pas overflow-wrapmais fonctionne bien avecword-wrap

utilisez overflow:auto-le donnera un défilement à votre texte dans le div:).

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

white-space: pre-wrap;

Cela a fait l'affaire pour moi:

{word-break: break-all; }

J'ai récemment rencontré cela. J'ai utilisé:display:block;

Si c'est juste une instance qui doit être enveloppée sur 2 ou 3 lignes, je n'en utiliserais que quelques-unes <wbr>dans la chaîne. Il traitera ceux-ci comme <br>mais il n'insérera pas de saut de ligne si ce n'est pas nécessaire.

<div id="w74" class="dpinfo">
adsfadsadsads<wbr>fadsadsadsfadsadsa<wbr>dsfadsadsadsfadsadsads<wbr>fadsadsadsfadsadsadsfa<wbr>dsadsadsfadsadsadsfadsad<wbr>sadsfadsadsads<wbr>fadsadsadsfadsads adsfadsads
</div>

Voici un violon.

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