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

css border

— madhu131313
source

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 .

— chipcullen
source

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.

— Nixon
source

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

— Paolo
source

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:).

— Rahul Razdan
source

4

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

white-space: pre-wrap;

— Martin Lloyd Jose
source

2

Cela a fait l'affaire pour moi:

{word-break: break-all; }

— Addo
source

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;

— arn-arn
source

-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/

— gaby de wilde
source