Je me demande actuellement quelle est la différence entre les deux. Quand j'ai utilisé les deux, ils semblent briser le mot si ça ne correspond pas au conteneur. Mais pourquoi le W3C a-t-il fait deux façons de le faire?
Réponses
Trop de publicités?word-wrap: break-word
- se terminera à long termes sur la ligne suivante.
- règle les différents mots de sorte qu'ils ne se cassent pas dans le milieu.
word-break: break-all
- indépendamment de savoir si il est continu d'un mot ou de plusieurs mots, les pauses 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 taille fixe, qui s'étend sur le contenu de manière dynamique, vous pourriez préférer utiliser word-wrap: break-word
, que de cette façon que le continu les mots sont décomposés entre les deux, et dans le cas où c'est une phrase composée de plusieurs mots, les espaces sont ajustées de manière à obtenir intacte mots (pas de rupture à l'intérieur d'un mot).
Et si ce n'est pas grave, allez, soit.
La spécification W3 qui en parle suggère que word-break: break-all
demande un comportement particulier avec du texte CJK (chinois, japonais et coréen), alors que word-wrap: break-word
est le plus général, non -CJK-conscient, comportement.
Avec word-break
, un mot très long 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 envelopper à la ligne suivante, puis être brisé 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 d'un élément table
:
word-wrap:break-word
n'entraînera pas l'enroulement de mots longs, ce qui peut entraîner un dépassement des limites de son conteneur;
word-break:break-all
se traduira par l'emballage des mots et l'ajustement de la table dans son conteneur. jsfiddle demo .
C'est tout ce que je peux trouver. Vous ne savez pas si cela aide, mais pensé que je pourrais l'ajouter au mélange.
WORD-WRAP
Cette propriété spécifie si le rendu de la ligne doit se briser si le contenu dépasse la limite de l'rendu de la boîte, un élément (ce qui est similaire à certains égards à la "clip" et "dépassement de capacité "propriétés" dans l'intention.) Cette propriété ne devrait s'appliquer que si l'élément a un rendu visuel, est un élément inline explicite hauteur/largeur, est en position absolue et/ou d'un élément de bloc.
WORD-BREAK
Cette propriété contrôle la ligne de rupture de comportement à l'intérieur des mots. Il est particulièrement utile dans les cas où plusieurs langues sont utilisées au sein d'un élément.