Quelle est la différence entre "word-break: break-all" et "word-wrap: break-word" dans le CSS

word-wrap: break-word récemment changé en overflow-wrap: break-word

• enveloppera de longs mots sur la ligne suivante.
• ajuste les différents mots pour qu'ils ne se cassent pas au milieu.

word-break: break-all

• qu'il s'agisse d'un mot continu ou de plusieurs mots, les brise au bord de la limite de largeur. (c'est à dire même dans les personnages d'un même mot)

donc si vous avez beaucoup de travées de taille fixe qui obtiennent le contenu dynamiquement, vous pourriez juste préférer utiliser word-wrap: break-word , car de cette façon seulement les mots continus sont brisés entre, et dans le cas où il s'agit d'une phrase comprenant de nombreux mots, les espaces sont ajustés pour obtenir des mots intacts (aucune rupture dans un mot).

et si ça n'a pas d'importance, choisis l'un ou l'autre.

avec word-break , un très long mot commence au point où il devrait commencer et il est cassé aussi longtemps que nécessaire

[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live 
inside this narrow paragr
aph.

cependant, avec word-wrap , un mot très long ne commencera pas au point où il devrait commencer. il s'enroule à la ligne suivante et est ensuite cassé aussi longtemps que nécessaire

[X] I am a text that 
012345678901234567890123
4567890123456789 want to
live inside this narrow 
paragraph.

au moins dans Firefox (à partir de v24) et Chrome( à partir de v30), lorsqu'il est appliqué au contenu dans un élément table :

word-wrap:break-word

ne provoquera pas réellement de longs mots à envelopper, ce qui peut avoir pour résultat que le tableau dépasse les limites de son contenant;

word-break:break-all

"will se traduit par des mots d'emballage, et la table s'adapte à l'intérieur de son conteneur.

jsfiddle démo .

C'est tout ce que je peux trouver. Pas sûr que ça aide, mais j'ai pensé l'ajouter au mélange.

WORD-WRAP

cette propriété spécifie si la ligne rendue courante doit se casser si le contenu dépasse la limite de la boîte de rendu spécifiée pour un élément (ceci est similaire d'une certaine manière aux propriétés ‘clip’ et ‘overflow’ en intention.) Cette propriété ne devrait s'appliquer que si l'élément a un rendu visuel, est un élément inline avec hauteur/largeur explicite, est absolument positionné et / ou est un élément de bloc.

WORD-BREAK

cette propriété contrôle le comportement de rupture de ligne dans les mots. Il est particulièrement utile dans les cas où plusieurs langues sont utilisées dans un élément.

word-wrap a été renommé en overflow-wrap probablement pour éviter cette confusion.

voilà ce que nous avons:

overflow-wrap

la propriété overflow-wrap est utilisée pour indiquer si le navigateur peut casser des lignes à l'intérieur de mots afin d'empêcher le débordement lorsqu'une chaîne par ailleurs incassable est trop longue pour s'insérer dans sa boîte contenant.

valeurs possibles:

• normal : indique que les lignes ne peuvent se briser qu'aux points de rupture normaux des mots.

• break-word : indique que des mots normalement incassables peuvent être cassés à des points arbitraires s'il n'y a pas de points de rupture acceptables dans la ligne.

source .

word-break

la propriété CSS de word-break sert à préciser s'il faut casser des lignes à l'intérieur des mots.

• normal : utilisez la règle de rupture de ligne par défaut.
• break-all : les mots breaks peuvent être insérés entre n'importe quel caractère pour un texte non-CJK (Chinois/Japonais/Coréen).
• keep-all : ne pas autoriser de casse de mots pour le texte CJK. Le comportement du texte Non-CJK est le même que pour normal.

source .

maintenant de retour à votre question, la principale différence entre overflow-wrap et word-break est que la première détermine le comportement sur un overflow , alors que le plus récent détermine le comportement sur un normal situation (pas de débordement). Une situation débordement se produit lorsque le conteneur n'a pas assez d'espace pour contenir le texte. Briser les lignes sur cette situation n'aide pas parce qu'il n'y a pas d'espace (imaginez une boîte avec une largeur et une hauteur fixes).

:

• overflow-wrap: break-word : dans une situation de débordement, cassez les mots.
• word-break: break-all : dans une situation normale, il suffit de casser les mots au bout de la ligne. Un dépassement de capacité n'est pas nécessaire.

des spécifications respectives W3 -qui se trouvent être assez peu clair en raison d'un manque de contexte - on peut en déduire ce qui suit:

• word-break: break-all est pour briser les mots étrangers, non-CJK (dire occidental) dans les Écritures de caractère CJK (chinois, japonais ou Coréen).
• word-wrap: break-word est pour la rupture de mot dans une langue non-mélangée (disons seulement occidentale).

At au moins, ce sont les intentions de W3. Ce qui s'est réellement passé, c'est un gros problème avec des incompatibilités de navigateur en conséquence. Voici un excellent rapport des différents problèmes impliqués .

l'extrait de code suivant peut servir de résumé de la façon d'obtenir le word wrapping en utilisant CSS dans un environnement de navigateur croisé:

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

word-break:break-all :

mot pour continuer à border puis briser newline.

word-wrap:break-word :

dans un premier temps, mot enveloppé dans newline puis continuer à bord.

exemple:

div {
   border: 1px solid red;
   width: 200px;
}

span {
  background-color: yellow;
}

.break-all {
  word-break:break-all;
 }
.break-word {
  word-wrap:break-word;  
}

<b>word-break:break-all</b>

<div class="break-all">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

<b> word-wrap:break-word</b>

<div class="break-word">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

en plus des commentaires précédents le soutien de navigateur pour word-wrap semble être un peu mieux que pour word-break .