web-dev-qa-db-fra.com

Comment forcer une coupure de ligne dans un loooooong Word dans une DIV?

Ok, c'est vraiment déroutant pour moi. J'ai du contenu à l'intérieur d'une div comme ceci:

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

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

</div>

Cependant, le contenu déborde de la DIV (comme prévu) car le "mot" est trop long.

Comment puis-je forcer le navigateur à "casser" le mot si nécessaire pour que tout le contenu s'y trouve?

htmlcssline-breaks
387
Nathan Osman

Utilisez [Word-break: break-Word;]

582
Chi

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

_Word-break: break-all;
_

Aussi, vous pouvez utiliser <wbr> tag

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

115
rahul

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

Sources:

CSS

.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;
}
95
Milche Patern

Je cherchais simplement le même problème sur Google et ai posté ma solution finale HERE . Cela concerne également cette question, alors j'espère que le report ne vous dérange pas.

Vous pouvez le faire facilement avec un DIV en lui donnant le style Word-wrap: break-Word (et vous devrez peut-être aussi en définir la 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 de colonnes ne sont plus fluides, mais sont définies en fonction des largeurs des colonnes de la première ligne uniquement (ou via des largeurs spécifiées). Lire la suite 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 */
}

J'espère que ça aide quelqu'un.

30
Simon East

&#8203; est l'entité HTML d'un caractère unicode appelé ZWSP (zero-width space), qui est un caractère invisible spécifiant une opportunité de saut de ligne. De la même manière, le trait d'union est de spécifier une opportunité de saut de ligne dans une limite de Word.

26
davidcondrey

Nous avons constaté que l'utilisation de ce qui suit fonctionnait avec la plupart des navigateurs principaux (Chrome, IE, Safari iOS/OSX), à l'exception de Firefox (v50.0.2), lorsque vous utilisiez flex-box et que vous utilisiez 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 le texte utilisant &nbsp; pour que l'espacement puisse provoquer des sauts de ligne au milieu du mot.

18
Andrew

CSSWord-wrap:break-Word;, testé dans FireFox 3.6.3

7
Babiker

Supprimez white-space: nowrap, s’il en existe.

Mettre en place:

    white-space: inherit;
    Word-break: break-Word;
5
Vineet Kumar Singh

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

display: table-caption;
5
Thadeu Esteves Jr.

De MDN :

La propriété overflow-wrap 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-wrap ne créera une rupture que si un mot entier ne peut pas être placé sur sa propre ligne sans déborder.

Pour que vous puissiez utiliser:

overflow-wrap: break-Word;

Puis-je utiliser ?

2
Shiva127

D'abord, vous devez identifier la largeur de votre élément. Par exemple:

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

#sampleDiv{
  width: 80%;
  Word-wrap:break-Word;
}

ainsi, lorsque le texte atteindra la largeur de l'élément, il sera divisé en lignes.

2
Tran Nam Hung

Les espaces sont préservés par le navigateur. Le texte sera renvoyé à la ligne si nécessaire et en ligne

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

DÉMO

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>
1
Tính Ngô Quang