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 casser la Parole si cela ne convient pas au contenant. Mais pourquoi le W3C a-t-il fait deux façons de le faire?
La spécification W3 qui en parle semblent suggérer que Word-break: break-all est destiné à exiger un comportement particulier avec le texte CJK (chinois, japonais et coréen), alors que Word-wrap: break-Word est le plus comportement général non conscient de la CJK.
Word-wrap: break-Word récemment changé en overflow-wrap: break-Word
- va envelopper 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 d’un grand nombre de mots, casse-les à la limite de la largeur. (c'est-à-dire même dans les caractères du même mot)
Donc, si vous avez beaucoup de plages de taille fixe qui obtiennent du contenu de façon dynamique, vous préférerez peut-être simplement utiliser Word-wrap: break-Word, car ainsi seuls les mots continus sont séparés, et dans le cas où il s'agit d'une phrase comportant de nombreux mots, les espaces sont: ajusté pour obtenir des mots intacts (pas de rupture dans un mot).
Et si cela n’a aucune importance, optez pour l’une ou l’autre.
Avec Word-break, un très long mot 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 très long mot NE COMMENCE PAS au point où il devrait commencer. il passe à la ligne suivante et est ensuite cassé 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'ils sont appliqués au contenu d'un élément table:
Word-wrap:break-Word
n'entraînera pas la saisie de longs mots, ce qui peut entraîner un dépassement des limites du tableau;
Word-break:break-all
entraînera un encapsulage des mots et une adaptation de la table dans son conteneur.
Word-wrap a été renommé en overflow-wrap probablement pour éviter cette confusion.
Maintenant, voici ce que nous avons:
débordement
La propriété overflow-wrap est utilisée pour spécifier si le navigateur peut ou non rompre les lignes dans les mots afin d'empêcher le débordement lorsqu'une chaîne autrement indestructible est trop longue se loger dans sa boite.
Valeurs possibles:
normal : Indique que les lignes peuvent uniquement être rompues aux points de rupture de mot normaux.
break-Word : Indique que des mots normalement incassables peuvent être cassés à des points arbitraires s'il n'y a pas de points d'arrêt autrement acceptables dans la ligne.
source .
Coupure de parole
La propriété CSS Word-break est utilisée pour spécifier s'il faut séparer les lignes au sein de mots.
- normal : utilise 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 du texte autre que 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 identique à celui de la normale.
source .
Revenons maintenant à votre question. La principale différence entre overflow-wrap et Word-break est que le premier détermine le comportement sur une situation de débordement , tandis que le second détermine le comportement sur une situation normale ( pas de débordement). Un débordement se produit lorsque le conteneur ne dispose pas de suffisamment d'espace pour contenir le texte. Couper les lignes dans cette situation ne sert à rien car il n’ya pas d’espace (imaginez une boîte avec une largeur et une hauteur fixes).
Alors:
overflow-wrap: break-Word: En cas de débordement, casser les mots.Word-break: break-all: Dans une situation normale, il suffit de casser les mots à la fin de la ligne. Un débordement n'est pas nécessaire.
C'est tout ce que je peux savoir. Je ne suis pas sûr que cela aide, mais je pensais l'ajouter au mélange.
Word-WRAP
Cette propriété spécifie si la ligne de rendu actuelle doit être interrompue si le contenu dépasse la limite de la zone de rendu spécifiée pour un élément (ceci est similaire à certains égards aux propriétés "clip" et "débordement" de l'intention.) Cette propriété doit uniquement s'appliquer si l'élément a un rendu visuel, est un élément en ligne avec une hauteur/largeur explicite, est positionné de manière absolue et/ou est un élément de bloc.
Word-BREAK
Cette propriété contrôle le comportement de coupure de ligne dans les mots. Cela est particulièrement utile dans les cas où plusieurs langues sont utilisées dans un élément.
Word-break:break-all:
Word pour continuer à border puis casser en nouvelle ligne.
Word-wrap:break-Word:
Au début, le retour à la ligne entre nouvelles lignes puis 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>D'après les spécifications W - qui sont assez floues faute de contexte - on peut en déduire ce qui suit:
Word-break: break-allsert à séparer les mots étrangers non-CJK (par exemple occidentaux) des écritures à caractères CJK (chinois, japonais ou coréen).Word-wrap: break-Wordest destiné à Word dans une langue non mixte (disons uniquement occidentale).
Au moins, c'étaient les intentions de W3. Ce qui s’est réellement passé, c’est qu’un cock-up majeur avec des incompatibilités de navigateur a été créé. Voici ne excellente description des différents problèmes impliqués .
L'extrait de code suivant peut servir de résumé de la procédure à suivre pour effectuer un wrapping Word à l'aide de CSS dans un environnement inter-navigateurs:
-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;
Il y a une différence énorme. break-all est fondamentalement inutilisable pour le rendu de texte lisible (avec l'alphabet occidental).
Supposons que vous ayez la chaîne This is a text from an old magazine dans un conteneur ne contenant 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 constater, le résultat est affreux. break-all essaiera de placer autant de caractères que possible dans chaque ligne. Il divisera même un mot de 2 lettres du type "est" sur 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 cassera que les mots trop longs pour tenir dans le conteneur (comme "magazine", qui contient 8 caractères, et le conteneur ne pouvant contenir que 6 caractères). Il ne brisera jamais les mots qui pourraient entrer dans le conteneur dans leur intégralité, mais les poussera vers 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>
</divEn plus des commentaires précédents, la prise en charge du navigateur pour Word-wrap semble être un peu meilleure que pour Word-break .