Je me demande actuellement quelle est la différence entre les deux. Quand j'ai utilisé les deux, ils semblent casser le mot s'il ne correspond pas au récipient. Mais pourquoi le W3C a-t-il fait deux façons de le faire?

La spécification W3 qui en parle semble suggérer que word-break: break-allc'est pour exiger un comportement particulier avec le texte CJK (chinois, japonais et coréen), alors que word-wrap: break-wordc'est le comportement plus général, non-CJK.

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

• encapsulera les mots longs sur la ligne suivante.
• ajuste 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 décompose au bord de la limite de largeur. (c'est-à-dire même dans les caractères d'un même mot)

Donc, si vous avez de nombreuses plages de taille fixe qui obtiennent du contenu de manière dynamique, vous préférerez peut-être simplement utiliser word-wrap: break-word, car de cette façon, seuls les mots continus sont séparés entre eux, et dans le cas où il s'agit d'une phrase comprenant plusieurs mots, les espaces sont ajustés pour obtenir des mots intacts. (pas de pause dans un mot).

Et si cela n'a pas d'importance, optez pour l'un ou l'autre.

Avec word-break, un très long mot commence au point où il devrait commencer et il est interrompu 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 très long mot NE commencera PAS au point où il devrait commencer. il passe à la ligne suivante, puis est interrompu aussi longtemps que nécessaire

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

word-wrapa été renommé overflow-wrapprobablement pour éviter cette confusion.

Voici ce que nous avons:

débordement

La propriété overflow-wrap est utilisée pour spécifier si le navigateur peut ou non couper les lignes dans les mots afin d'empêcher le débordement lorsqu'une chaîne par ailleurs incassable est trop longue pour tenir dans sa boîte contenant.

Valeurs possibles:

• normal : indique que les lignes ne peuvent se rompre qu'aux points de rupture de mot normaux.

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

source .

coupure de mots

La propriété CSS de coupure de mot est utilisée pour spécifier s'il faut couper les lignes dans les mots.

• normal : utilisez la règle de saut de ligne par défaut.
• break-all : des sauts de mots peuvent être insérés entre n'importe quel caractère pour le texte non-CJK (chinois / japonais / coréen).
• keep-all : n'autorise pas les sauts de mots pour le texte CJK. Le comportement du texte non CJK est le même que pour la normale.

source .

Maintenant, revenons à votre question, la principale différence entre le débordement et le saut de mot est que le premier détermine le comportement dans une situation de débordement , tandis que le dernier détermine le comportement dans une situation normale (pas de débordement). Une situation de débordement se produit lorsque le conteneur n'a pas assez d'espace pour contenir le texte. La rupture des lignes dans cette situation n'aide pas car il n'y a pas d'espace (imaginez une boîte avec une largeur et une hauteur fixes).

Donc:

• overflow-wrap: break-word: En cas de débordement, cassez les mots.
• word-break: break-all: Dans une situation normale, cassez simplement les mots à la fin de la ligne. Un débordement n'est pas nécessaire.

Au moins dans Firefox (à partir de la version 24) et Chrome (à partir de la version 30), lorsqu'il est appliqué au contenu d'un tableélément:

word-wrap:break-word

n'entraînera en fait pas de longs mots à envelopper, ce qui peut entraîner le dépassement des limites de son conteneur par la table;

word-break:break-all

se traduira par enveloppement des mots, et la table raccord à l'intérieur de son conteneur.

démo jsfiddle .

C'est tout ce que je peux découvrir. Je ne sais pas si cela aide, mais j'ai pensé l'ajouter au mélange.

WORD-WRAP

Cette propriété spécifie si la ligne de rendu actuelle doit se rompre si le contenu dépasse la limite de la zone de rendu spécifiée pour un élément (cela est similaire à certains égards aux propriétés 'clip' et 'overflow' en intention.) Cette propriété ne doit s'appliquer si l'élément a un rendu visuel, est un élément en ligne avec une 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.

Il y a une énorme différence. break-allest fondamentalement inutilisable pour le rendu de texte lisible.

Disons que vous avez la chaîne This is a text from an old magazinedans un conteneur qui ne contient que 6 caractères par ligne.

word-break: break-all

This i
s a te
xt fro
m an o
ld mag
azine

Comme vous pouvez le voir, le résultat est affreux. break-allessaiera de placer autant de caractères dans chaque ligne que possible, il divisera même un mot de 2 lettres comme "est" en 2 lignes! C'est ridicule. C'est pourquoi break-allest rarement utilisé.

word-wrap: break-word

This
is a
text
from
an old
magazi
ne

break-wordne brisera que les mots trop longs pour tenir dans le conteneur (comme "magazine", qui fait 8 caractères et le conteneur ne contient que 6 caractères). Il ne cassera jamais les mots qui pourraient s'adapter au conteneur dans leur intégralité, mais les poussera à une nouvelle ligne.

<div style="width: 100px; border: solid 1px black; font-family: monospace;">
  <h1 style="word-break: break-all;">This is a text from an old magazine</h1>
  <hr>
  <h1 style="word-wrap: break-word;">This is a text from an old magazine</h1>
</div

word-break:break-all :

mot pour continuer à border puis interrompre la nouvelle ligne.

word-wrap:break-word :

Au début, le retour automatique à la ligne dans la nouvelle ligne continue ensuite à la bordure.

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>

À partir des spécifications W3 respectives - qui se révèlent assez floues en raison d'un manque de contexte - on peut en déduire ce qui suit:

• word-break: break-all sert à décomposer des mots étrangers non-CJK (disons occidentaux) en caractères CJK (chinois, japonais ou coréen).
• word-wrap: break-word est pour la rupture de mots dans une langue non mixte (disons uniquement occidentale).

Telles étaient du moins les intentions de W3. Ce qui s'est réellement passé a été un gros problème avec des incompatibilités de navigateur en conséquence. Voici un excellent compte rendu des différents problèmes impliqués .

L'extrait de code suivant peut servir de résumé de la façon de réaliser un habillage de mots à l'aide de CSS dans un environnement multi-navigateur:

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

En plus des commentaires précédents, le support du navigateur word-wrapsemble être un peu mieux que pour word-break.