texte sortant de div


98

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

entrez la description de l'image ici

entrez la description de l'image ici

Réponses:


172

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 .


3
cela n'a pas fonctionné pour moi, voici un autre exemple.
Deepak Vaishnav

C'est génial, a résolu un problème dans la page
réactive

Quelle solution propre et facile. Merci de l'avoir partagé.
Dzenis H.22

108

Utilisation

white-space: pre-line;

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


28

Vous devez utiliser overflow:hidden; ouscroll

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

ou avec php, vous pouvez raccourcir les mots longs ...


Désolé de mentionner que je veux qu'il passe à la ligne suivante, comme le chat gmail ou le chat facebook :)
madhu131313

Ensuite, vous pouvez utiliser la version de @chipcullen avec word-wrap! démo: jsfiddle.net/UJ6zG/3

8

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


Merci, cela a fonctionné pour moi. Vous avez écrit "With the value set to break-world" - Je suis presque sûr que vous vouliez dire "break-word" sans le "l", j'espère que vous ne vouliez pas briser le monde;)
Jake Neumann

7

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


4

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

white-space: pre-wrap;

2

Cela a fait l'affaire pour moi:

{word-break: break-all; }


1
merci beaucoup, c'était la seule chose qui fonctionnait pour mon (en utilisant des composants
stylisés

0

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


-6

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/

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.