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

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?

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.

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.

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

Sources:

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

.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 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 */
}

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

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é  pour l'espacement peut provoquer des sauts de ligne au milieu du mot.

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

J'ai résolu mon problème avec le code ci-dessous.

display: table-caption;

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

Mettre en place:

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

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>

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 ?

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.

Comme mentionné dans la réponse de @ davidcondrey, il n'y a pas seulement le ZWSP, mais aussi le 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­haven­politie­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

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

Faites ceci:

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

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

essayez ceci dans notre style

white-space: normal;