Search code examples
cssword-break

whats the difference between word-break: normal; and word-break: keep:all;?

These seem to do the same thing, whats the difference? https://jsfiddle.net/pmuub8w1/2/

    p{
          word-break:normal;
   }

   p{
         word-break: keep-all;
    }
Solution
    1. normal: Follow normal line break rules, that is to break line at the space between words. So even if the last words goes out of bounds of the container, sentence won't go to next line till next word comes. This will be done for all text even for CJK characters (Chinese, Japanese, Korean and derivatives)
    2. break-all: Break at the characters if out of bounds, that means a word itself will be broken and taken to the second line. So suppose ALongWord is going out of bounds at the AL then break-all will make the rest ongWord go to the second line. This will not be done for the CJK characters.
    3. keep-all: Break by normal line rules except for the CJK characters. It's like normal except in case of CJK it won't break at all (neither by line rules as done by normal nor at characters as done by break-all)

    Following is the screenshot of the example at Mozzila documentation. word-break

    Notice the difference between how the non CJK and CJK sentences are treated.