What's word-break and word-wrap?

自问
css, 排版

word-wrap - Overflow Wrapping

The overflow-wrap (aka word-wrap) property specifies whether the user agent may arbitrarily break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit within the line box.

  1. normal: Lines may break only at allowed break points. (Like whitespace)
  2. break-word: An unbreakable word (a complete word) may be broken at arbitrary points if there are no otherwise acceptable break points in the line.
    Only work when the white-space property allows wrapping.

word-break - Breaking Rules for Letters

The word-break property specifies whether to break lines within a word.

  1. normal: Words break as usual
  2. break-all: In addition to normal, lines may break between any two letters (for non-CJK (Chinese/Japanese/Korean) text).
  3. keep-all: Don’t allow word breaks for CJK text. Non-CJK text behavior is the same as for normal.

A nice example given by W3C, and this by MDN.

1
2
3
normal: 什·么·鬼，·what·the·fuck.
break-all: 什·么·鬼，·w·h·a·t·t·h·e·f·u·c·k.
keep-all: 什么鬼，·what·the·fuck.

See the Pen css text by Shawn Dai (@daix6) on CodePen.

References

  1. CSS Text Module Level 3
  2. overflow-wrap - MDN
  3. word-break - MDN
Comments