Comment forcer un saut de ligne dans un mot long dans un DIV?


417

D'accord, cela me déroute vraiment. J'ai du contenu à l'intérieur d'un div comme ceci:

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

Cependant, le contenu déborde du DIV (comme prévu) car le «mot» est trop long.

Comment puis-je forcer le navigateur à «casser» le mot lorsque cela est nécessaire pour adapter tout le contenu à l'intérieur?


Jetez un oeil à cette question: stackoverflow.com/questions/2046530/…
nickf

Réponses:


610

Utilisation word-wrap:break-word;

Il fonctionne même dans IE6, ce qui est une agréable surprise.


word-wrap: break-worda été remplacé par celui overflow-wrap: break-word;qui fonctionne dans tous les navigateurs modernes. IE, étant un navigateur mort, s'appuiera à jamais sur les versions obsolètes et non standard word-wrap.

Les utilisations word-wrapactuelles fonctionnent toujours car c'est un alias pour overflow-wrapla spécification.


75
En fait, le retour à la ligne est une invention d'IE. Donc pas de surprise que cela fonctionne dans IE :)
Savas Vedova

1
Pour que cela fonctionne dans une table, vous devrez peut-être appliquer la table-layout: fixed;à la table
Serj Sagan

28
word-wrap: break-wordn'a pas fonctionné pour moi mais word-break: break-wordcomme @rahul l'a suggéré ci-dessous a fonctionné.
Yves

1
Remarque: Cela ne fonctionnera que si vous le donnez dans div parent dans IE (pas dans la plage intérieure à l'intérieur de div).
sms

125

Je ne suis pas sûr de la compatibilité du navigateur

word-break: break-all;

Vous pouvez également utiliser la <wbr>balise

<wbr>(saut de mot) signifie: "Le navigateur peut insérer un saut de ligne ici, s'il le souhaite." Si le navigateur ne pense pas qu'un saut de ligne soit nécessaire, rien ne se passe.


23
Soyez conscient de ce mot-break: break-all; cassera les mots au milieu s'il peut encore contenir des caractères sur une ligne avec d'autres mots avant, ce qui pourrait ne pas être le résultat souhaité, tandis que le mot-retour à la ligne: break-word; déplace les mots vers une nouvelle ligne et ne rompt le mot que s'il est trop long pour tenir sur sa propre ligne dans le conteneur. Exemple: jsfiddle.net/4AKhn/1
alexteg

break-all rompt tout. Bon à utiliser avec une classe spécifique qui a une URL longue, etc. uniquement, mais pas avec BODY ou P
Upendra

Ceci est certainement parfaitement (et souhaité) acceptable lorsque vous essayez d'afficher quelque chose comme un URI de demande dans une cellule de table de journal et que vous en avez besoin pour arrêter de casser la table entière avec une longue cellule géante. La rupture au milieu d'un «mot» est souhaitée;) Bien que la réponse acceptée ne fasse pas de squat à cet égard.
IncredibleHat

@ Skelly1983 il n'y a rien de tel que IE12
TylerH

@TylerH J'en suis conscient, merci de me l'avoir signalé après 3 ans. Ceci est répertorié sur le tableau de prise en charge du navigateur w3schools pour la balise wbr, qui répertorie la prise en charge comme "Internet Explorer / Edge" et a le numéro de version répertorié comme 12.0, qui est en fait la première version d'Edge.
Skelly1983

98

Cela pourrait être ajouté à la réponse acceptée pour une solution «multi-navigateur».

Sources:

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

Je l'ai obtenu sur Chrome / Opera et Safari, mais je ne l'ai toujours pas sur Firefox et IE. Avec cela, j'ai résolu Firefox, mais IE continue de parcourir le conteneur (j'ai un long nom de fichier composé uniquement de caractères alphanumériques).
Kamafeather

1
Salut Kamafeather, je ne suis pas sûr, mais si un nom de fichier vraiment long que vous tentez de casser, le contexte entier (navigateur, code html-css) pourrait être utile pour vous aider davantage. Peut-être pourriez-vous créer une autre question avec votre situation.
Milche Patern

Veuillez noter que cela casse des mots dans des endroits non grammaticaux.

@ user1322720 qu'est-ce qu'un lieu "non grammatical"?
TylerH

31

Je cherchais sur Google le même problème et j'ai affiché ma solution finale ICI . Cela concerne également cette question.

Vous pouvez le faire facilement avec un div en lui donnant le style word-wrap: break-word(et vous devrez peut-être également définir sa largeur).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

Cependant, pour les tables , vous devez également appliquer: table-layout: fixed. Cela signifie que les largeurs des colonnes ne sont plus fluides, mais sont définies en fonction des largeurs des colonnes de la première ligne uniquement (ou via les largeurs spécifiées). En savoir plus ici .

Exemple de code:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

1
Merci pour la solution des tableaux;) Cependant, je ne comprends pas très bien pourquoi le break-word ne peut pas être utilisé avec la mise en page automatique. Toute suggestion?
ondObno

@ondObno Oui, je ne suis pas sûr de la raison technique, mais plusieurs navigateurs semblent se comporter de cette façon. C'est peut-être parce que les mots super longs gâchent tous les calculs nécessaires pour déterminer les largeurs de chaque colonne.
Simon East

Le réglage width: 100%;était le seul moyen pour que cela fonctionne pour moi sur FF et chrome!
Putzi San

27

&#8203;est l'entité HTML d'un caractère unicode appelé espace de largeur nulle (ZWSP) qui est un caractère invisible qui spécifie une opportunité de saut de ligne. De même, l'objectif du tiret est de spécifier une opportunité de saut de ligne dans une limite de mot.


1
Très bon conseil! Juste pour compléter: &#8203;a une priorité inférieure à un espace blanc (c'est-à-dire s'il y en a un à proximité, la ligne se brisera à la place dans un espace blanc).
CPHPython

Semble être l' <wbr/>équivalent unicode que je cherchais
Xenos

20

J'ai constaté que l'utilisation des éléments suivants fonctionnait sur la plupart des principaux navigateurs (Chrome, IE, Safari iOS / OSX), à l'exception de Firefox (v50.0.2) lors de l'utilisation de Flexbox et de la fiabilité width: auto.

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

Remarque: vous devrez peut-être ajouter des préfixes de fournisseur de navigateur si vous n'utilisez pas de préfixe automatique.

Une autre chose à surveiller est que le texte utilisé &nbsp;pour l'espacement peut provoquer des sauts de ligne au milieu du mot.


5
C'est exactement ce dont j'avais besoin. Les autres solutions ne fonctionnaient pas avec la largeur: 100%. Une chose à noter: word-break: break-word; devrait être mot-break: break-all;
2017

7

CSS word-wrap:break-word; , testé dans FireFox 3.6.3



5

Retirez white-space: nowrap, s'il y en a.

Mettre en place:

white-space: inherit;
word-break: break-word;

3

L'espace est conservé par le navigateur. Le texte se terminera si nécessaire et les sauts en ligne

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

DEMO

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}
<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>


2

De 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.

Contrairement à word-break, overflow-wrapne crée une coupure que si un mot entier ne peut pas être placé sur sa propre ligne sans débordement.

Vous pouvez donc utiliser:

overflow-wrap: break-word;

Puis-je utiliser ?


2

Vous devez d'abord identifier la largeur de votre élément. Par exemple:

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}
<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

de sorte que lorsque le texte atteindra la largeur de l'élément, il sera décomposé en lignes.


2

Comme mentionné dans la réponse de @ davidcondrey, il n'y a pas seulement le ZWSP, mais aussi le SHY &#173; &shy;qui peut être utilisé en de très longs mots construits (pensez l'allemand ou le néerlandais) qui doivent être cassés à l'endroit où vous le souhaitez. Invisible, mais il donne un trait d'union au moment où il est nécessaire, gardant ainsi le mot connecté et la ligne remplie au maximum.

De cette façon, le mot luchthavenpolitieagent pourrait être noté comme lucht&shy;haven&shy;politie&shy;agentdonnant des parties plus longues que les syllabes du mot.
Bien que je ne lise jamais rien de officiel à ce sujet, ces tirets doux parviennent à obtenir une priorité plus élevée dans les navigateurs que les tirets officiels dans les mots simples de la construction ( s'ils ont une extension pour cela).
En pratique, aucun navigateur n'est capable de briser un mot aussi long et construit; sur des écrans plus petits, ce qui entraîne une nouvelle ligne, ou dans certains cas, même une ligne d'un mot (comme lorsque deux de ces mots construits suivent).

FYI: c'est néerlandais pour le policier de l'aéroport


0

word-break: normal semble préférable d'utiliser que word-break: break-word car break-word casse l'initiale comme EN

word-break: normal

-3

Faites ceci:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

-4

essayez ceci dans notre style

white-space: normal;

1
La duplication des réponses sur plusieurs questions est désapprouvée dans la plupart des cas. Dans ce cas, il semble que ce soit une réponse incorrecte aux deux questions. normalest la white-spacevaleur par défaut . Je pense que l'ajouter n'aurait aucun effet sur l'exemple de la question. Veuillez me corriger si je me trompe.
Jeremy Banks

Cela dépend du remplacement effectué par le CSS. Dans mon cas, j'ai dû le redéclarer sur "style" dans mon composant JSF pour remplacer le style CSS par défaut qui n'était pas "white-space: normal;"
Benjamin Fuentes
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.