Word Breaking and Soft Hyphens

There’s a couple of ways to determine where to break a line of text.

<wbr>

HTML element.

xeno<wbr>trans<wbr>plant<wbr>ation
xenotransplantation

&shy;

HTML entity code. “Soft-hyphenation”.

xeno&shy;trans&shy;plant&shy;ation
xeno­trans­plant­ation

CSS Properties

word-break and overflow-wrap (aka word-wrap) are also used to style how to break up a paragraph on overflow, though unlike the aforementioned two, they cannot pinpoint where exactly to break; rather, they focus on automatic splitting.

word-break: normal
They say the fishing is excellent at Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there myself. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
word-break: break-all
They say the fishing is excellent at Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there myself. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
word-break: keep-all
They say the fishing is excellent at Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there myself. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
overflow-wrap: normal
They say the fishing is excellent at Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there myself. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
overflow-wrap: break-word
They say the fishing is excellent at Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there myself. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
overflow-wrap: anywhere
They say the fishing is excellent at Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been there myself. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉

Example taken from MDN

The most significant differences can be found between:

Here are the definitions of each, based on MDN:

word-break: normal

Use the default line break rule: lines may only break at normal word break points (e.g. spaces between two words). (default)

word-break: break-all

To prevent overflow, word breaks should be inserted between any two characters (excluding CJK text).

word-break: keep-all

Word breaks should not be used for CJK text. Non-CJK text behavior is the same as for normal.

overflow-wrap: normal

Use the default line break rule. (default)

overflow-wrap: anywhere

To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise acceptable break points in the line. No hyphenation character is inserted at the break point. Soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes.

overflow-wrap: break-word

The same as the anywhere value, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.

MDN: word-break overflow-wrap