Quelle est la différence entre «word-break: break-all» et «word-wrap: break-word» en CSS


397

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?

Réponses:


215

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.


28
Notez également que le retour à la ligne est un nom hérité de la nouvelle propriété "débordement-retour" dans la spécification. w3.org/TR/css3-text/#overflow-wrap
squareman

12
Autrement dit: " word-breakspé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-breaken 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-wrappropriété peut ne pas fonctionner comme prévu .
gfullam

1
Parce que la spécification utilise uniquement les langues asiatiques à titre d'exemple, et non pas comme le seul objectif de la propriété (comme décrit également par gfullam), ce qui semble néanmoins être la principale conclusion de cette réponse.
Shikkediel

3
retour à la ligne: break-word -> ne casse pas la table ---- break-word: break-all -> brise les tables
Fernando Silva

1
Notez que le lien W3C mentionné par @squareman est désormais w3.org/TR/css-text-3/#overflow-wrap-property
Charles Wood

409

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.


28
Pourquoi cela n'est-il pas accepté? Cette réponse est plus utile pour la majorité des utilisateurs. Le comportement CJK ne s'applique qu'aux sites très internationaux.
MarioDS

3
Réponse courte mais douce! Bien que vous souhaitiez peut-être remplacer le retour à la ligne par un débordement?
Gaurav Agarwal

5
@MarioDS, il s'applique aux "sites Web très internationaux" ou, comme 20% du monde les appelle, aux "sites Web"
fregante

1
@GauravAgarwal: il convient de noter que IE (même dans la dernière version) repose toujours sur le nom hérité. Voir caniuse.com/#search=overflow-wrap
Felix Wienberg

2
le symbole "réponse acceptée" est lié au demandeur uniquement, pertinent pour l'exactitude de la réponse lorsqu'elle était pertinente pour lui à ce moment-là, c'est tout. Les utilisateurs ne devraient pas revenir à leurs questions après quelques années et examiner de nouvelles réponses. Les votes comptent sur la réponse pour montrer à la communauté la "réponse acceptée".
elpddev

98

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.

2
Est-ce toujours le cas si vous l'utilisez break-word. J'ai trouvé ennuyeux que ça word-breakcasse les URL mais pas word-wrap. Les deux utilisateurs l'ont break-wordobtenu sur css-tricks.com/snippets/css/…
Karthik T

44

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.

4
Excellente explication. Un exemple que j'ai rencontré tout à l'heure: de longs mots dans une cellule de tableau. overflow-wrap/ word-wrapJe 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-breakd'autre part l'a fixé.
Henrik N

@HenrikN table-layout: fixed;(éventuellement avec width/ max-width) peut le faire fonctionner overflow-wrap/word-wrapmais cela dépend du cas d'utilisation spécifique; tout comme word-breakce n'est peut-être pas ce que vous voulez.
phk

42

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.

entrez la description de l'image ici

démo jsfiddle .


5
Vous pouvez utiliser table-layout:fixedpour que la table ne se développe pas lors de l'utilisationword-wrap:break-work
veksen

@vesken Je n'ai pas pu faire fonctionner ça (dans Firefox 26). Pourriez-vous fournir une version mise à jour de mon jsfiddle lié ci-dessus pour démontrer ce que vous voulez dire?
Jon Schneider

3
Je l'ai fait fonctionner en ajoutant une largeur sur la table, soit 100%, soit en déplaçant la largeur de 80 pixels du conteneur sur la table. jsfiddle.net/SDGAX/37 Le comportement de la table n'est cependant pas le même en utilisanttable-layout:fixed
veksen

2
Ce problème se produit également lors de l'utilisation word-wrapen conjonction avec des prebalises dans Firefox, sauf si elles ont une largeur fixe définie. L'utilisation word-breakproduit 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.
gfullam

De plus, les éléments d'affichage en ligne sans largeur ne sont pas affectés par le "retour à la ligne", mais le "saut de mot" fonctionne toujours.
tfE

22

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.


Merci pour cela car je cherchais la différence entre word-wrapet word-breakqui peuvent tous deux avoir de la valeurbreak-word
Chad

10

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


Très bien expliqué. L'exemple montre la différence très clairement. Cela devrait être la réponse acceptée!
naitsirch

9

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>


8

À 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 utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.