434 votes

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

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?

454voto

Bhumi Singhal Points 1091

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.

235voto

AakashM Points 32891

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.

105voto

shuky Points 151

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.
 

42voto

Jon Schneider Points 2625

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 .

22voto

Jonny Haynes Points 1982

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.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X