Différence entre overflow-wrap et word-break ?

Question

Quelle est la différence exacte entre overflow-wrap / word-wrap y word-break ? Et quelqu'un peut-il me dire quel est le meilleur pour briser des liens très longs ? La plupart des gens disent qu'il faut utiliser word-break en combinaison avec overflow-wrap mais ça n'a pas l'air très logique. Je pense qu'en utilisant overflow-wrap en combinaison avec word-wrap pour une meilleure prise en charge des navigateurs est la meilleure méthode. Qu'en pensez-vous ?

Answer 1

Citation de la source

• word-wrap : La propriété CSS word-wrap est utilisée pour indiquer si le navigateur peut ou non rompre les lignes à l'intérieur des mots afin d'éviter tout débordement lorsqu'une chaîne de caractères autrement insécable est trop longue pour tenir dans la boîte qui la contient.

• débordement-emballage : word-wrap a été renommé overflow-wrap dans la version actuelle de la spécification CSS3 Texte

• rupture de mot : La propriété CSS word-break est utilisée pour spécifier comment (ou si) les lignes doivent être coupées dans les mots.

Vous avez donc besoin d'une rupture de mot en combinaison avec un retour de mot, ce qui est la bonne combinaison.

Answer 2

Il est utile de comprendre cela à ce stade, word-break: break-word est en réalité un alias pour overflow-wrap: anywhere .

word-break: break-word est officiellement déprécié ; voir le Module Texte CSS Niveau 3 Working Draft :

Pour des raisons de compatibilité avec le contenu existant, l word-break la propriété également supporte également un break-word mot-clé. Lorsqu'il est spécifié, il a le même effet que word-break: normal y overflow-wrap: anywhere , quelle que soit la valeur réelle de la propriété overflow-wrap.

Ce qu'il faut noter ici, c'est que word-break: break-word est un alias pour overflow-wrap: anywhere , NO un alias pour overflow-wrap: break-word .

( word-break: normal est juste la valeur par défaut pour word-break Vous pouvez donc l'ignorer, à moins que vous ne définissiez une valeur différente pour le paramètre word-break .)

Comment overflow-wrap: anywhere y overflow-wrap: break-word différer ?

La seule différence dans la documentation entre les deux est que overflow-wrap: anywhere DOIT "prendre en compte les possibilités d'enveloppement souple introduites par le mot break" lorsqu'il "calcule les tailles intrinsèques du min-contenu", alors que overflow-wrap: break-word ne le fait pas.

Je suppose que les largeurs pourraient être plus précises dans certains cas si elles sont prises en compte ?

Answer 3

Voici les différences exactes : (basé sur des tests dans Chrome v81, et la confirmation de mes observations en se référant à la spécification)

espace blanc

normal (par défaut) : réduit les chaînes d'espaces et les sauts de ligne ; ajoute les sauts de ligne là où ils sont nécessaires
nowrap : réduit les chaînes d'espaces et les sauts de ligne ; n'ajoute pas de sauts de ligne
pre-line : réduit les chaînes d'espacement ; ajoute des sauts de ligne si nécessaire
pre-wrap : pas de regroupement ; ajoute des sauts de ligne là où c'est nécessaire
break-spaces : identique à pre-wrap, sauf que les espaces peuvent déclencher l'ajout de sauts de ligne
pre : pas de rabattement ; n'ajoute pas de sauts de ligne

Remarque : si le white-space énumère "n'ajoute pas de sauts de ligne", le comportement des sauts de ligne des propriétés suivantes ne peut pas être appliqué (c'est-à-dire qu'il est ignoré).

Coupure de mots

normal (par défaut) : coupe la ligne à la fin du dernier mot contenu dans le conteneur [s'il existe], sinon la ligne est laissée telle quelle.
break-word : coupe la ligne à la fin du dernier mot du conteneur [s'il existe], sinon à la fin du conteneur.
break-all : coupe la ligne à la fin du conteneur [peut couper un mot, même avec un espace à proximité].

débordement-emballage (nom d'héritage : word-wrap)

normal (par défaut) : coupe la ligne à la fin du dernier mot contenu dans le conteneur [s'il existe], sinon la ligne est laissée intacte.
break-word : coupe la ligne à la fin du dernier mot qui s'insère dans le conteneur [s'il existe], sinon à la fin du conteneur [s'il s'agit d'un conteneur non flexible], sinon la ligne n'est pas coupée.
anywhere : coupe la ligne à la fin du dernier mot qui s'insère dans le conteneur [s'il existe], sinon à la fin du conteneur [comme dans le cas précédent]. word-break: break-word ]

Notez que pour overflow-wrap: break-word (comme pour toute combinaison qui laisse des lignes trop longues pour le conteneur), la ligne ininterrompue peut provoquer l'expansion d'un conteneur flexible au-delà du ratio de flexion spécifié (obligeant les autres conteneurs flexibles à se rétrécir pour tenir compte du contenu trop long).