Réponses:
La spécification W3 qui en parle semble suggérer que word-break: break-all
c'est pour exiger un comportement particulier avec le texte CJK (chinois, japonais et coréen), alors que word-wrap: break-word
c'est le comportement plus général, non-CJK.
word-break
spécifie les possibilités de retour à la ligne souple entre les lettres ..." La spécification W3C utilise le texte CLK comme exemple , mais ce n'est pas sa seule utilisation prévue. Il est courant de l'utiliser word-break
en conjonction avec de longues chaînes (telles que des URL ou des lignes de code) lorsque vous souhaitez qu'elles se cassent à la largeur du conteneur - en particulier si le conteneur est un pre
élément ou une cellule de tableau où la word-wrap
propriété peut ne pas fonctionner comme prévu .
word-wrap: break-word
récemment changé en overflow-wrap: break-word
word-break: break-all
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.
break-word
. J'ai trouvé ennuyeux que ça word-break
casse les URL mais pas word-wrap
. Les deux utilisateurs l'ont break-word
obtenu sur css-tricks.com/snippets/css/…
word-wrap
a été renommé overflow-wrap
probablement pour éviter cette confusion.
Voici ce que nous avons:
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 .
La propriété CSS de coupure de mot est utilisée pour spécifier s'il faut couper les lignes dans les mots.
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.overflow-wrap
/ word-wrap
Je ne les ai pas enveloppés. Vraisemblablement parce que les cellules du tableau sans largeur fixe se développent au lieu de déborder. Au lieu de cela, la table s'est élargie et est entrée en collision avec d'autres éléments. word-break
d'autre part l'a fixé.
table-layout: fixed;
(éventuellement avec width
/ max-width
) peut le faire fonctionner overflow-wrap/word-wrap
mais cela dépend du cas d'utilisation spécifique; tout comme word-break
ce n'est peut-être pas ce que vous voulez.
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.
table-layout:fixed
pour que la table ne se développe pas lors de l'utilisationword-wrap:break-work
table-layout:fixed
word-wrap
en conjonction avec des pre
balises dans Firefox, sauf si elles ont une largeur fixe définie. L'utilisation word-break
produit le résultat souhaité. J'ai lié à cette réponse dans un commentaire posté ci-dessus car elle démontre un cas d'utilisation courant.
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.
word-wrap
et word-break
qui peuvent tous deux avoir de la valeurbreak-word
Il y a une énorme différence. break-all
est fondamentalement inutilisable pour le rendu de texte lisible.
Disons que vous avez la chaîne This is a text from an old magazine
dans 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-all
essaiera 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-all
est rarement utilisé.
word-wrap: break-word
This
is a
text
from
an old
magazi
ne
break-word
ne 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-wrap
semble être un peu mieux que pour word-break
.