What is the difference between word-break: normal; and word-break: keep: all ;?
They seem to be doing the same thing, what's the difference? https://jsfiddle.net/pmuub8w1/2/
p{
word-break:normal;
}
p{
word-break: keep-all;
}
source to share
- normal: Follow the usual line break rules, that is, break a line in the space between words. Therefore, even if the last words are outside the container, the sentence does not move to the next line until the next word. This will be done for all text even for CJK characters (Chinese, Japanese, Korean and derivatives)
- break-all: Break on characters, if it goes out of bounds, it means that the word itself will be broken and wrapped in the second line. So suppose it
ALongWord
goes out of bounds inAL
thenbreak-all
will make the restongWord
go to the second line. This will not be done for symbolsCJK
. - keep-all: Break with normal line rules, except for CJK characters. It's like
normal
, exceptCJK
it won't break at all (neither by line rules, how donenormal
, nor by characters, how donebreak-all
)
Below is a screenshot of an example in the Mozzila Documentation .
Note the difference between how non-CJK and CJK sentences are handled.
source to share
Another answer gets the right part: normal
and are the keep-all
same for non-CJK text. However, the description of the behavior of the CJK text is incorrect.
B normal
, CJK can have a string split anywhere . This is because CJK is usually used without whitespace and widespread violation is acceptable (if not perfect). There ćŹĺ˝
is one word in the screenshot , but it is split in half at the beginning of the last line.
The break-all
non-CJK text can be split anywhere, just like the CJK's text normal
.
The keep-all
CJK text works the same way as the text in other scripts works in normal
- that is, if there is a long line without spaces, it can overflow the container. If you want the CJK text to be completed, you must manually insert spaces. This can be useful in conjunction with zero-width spaces to create line breaks with natural word boundaries. In the screenshot, because there are no spaces in Japanese text, it is treated the same as a long word in English and overflows the container.
source to share