texte sortant de la division

Question

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

Answer 1

C'est dû au fait que vous avez un seul long mot sans espace. Vous pouvez utiliser la fonction word-wrap pour provoquer la rupture du texte :

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

La prise en charge des navigateurs est également assez bonne. Voir la documentation à ce sujet ici .

Answer 2

Utilisez

white-space: pre-line;

Il empêchera le texte de sortir de l'écran. div . Il interrompra le texte lorsqu'il atteindra la fin de la page. div .

Answer 3

Vous devez utiliser overflow:hidden; o scroll

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

ou avec php vous pourriez raccourcir les mots longs...

Answer 4

Vous devez appliquer la propriété CSS suivante au bloc conteneur (div) :

overflow-wrap: break-word;

Selon les spécifications (source CSS | MDN ) :

El overflow-wrap La propriété CSS indique si le navigateur doit ou non insérer des sauts de ligne dans les mots pour éviter que le texte ne déborde de sa zone de contenu.

Avec la valeur fixée à break-word

Pour éviter tout débordement, des mots normalement insécables peuvent être rompus à des points arbitraires s'il n'y a pas d'autres points de rupture acceptables dans la ligne.

A noter...

La propriété était à l'origine une extension non standard et non fixée de Microsoft appelée word-wrap et a été mis en œuvre 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 tenez à la prise en charge des anciens navigateurs, 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 bien avec word-wrap

Answer 5

Utiliser overflow:auto cela donnera un défilement à votre texte dans la fenêtre div :).