By default, browsers will not wrap text at syllable boundaries. Text is wrapped at word boundaries only.
This card explains some options to make browsers wrap inside a long word like "Donaudampfschifffahrt"
.
Modern browsers are able to hyphenate natively with the CSS property hyphens
:
hyphens: auto
There is also hyphens: none
(disable hyphenations even at ­
entities) and hyphens: manual
(hyphenation at ­
only).
This feature was integrated
just recently
Show archive.org snapshot
in Chrome 88 while
every other major browser
Show archive.org snapshot
already supports it for a long time.
For the hyphens
property to work, your document language must be declared, e.g. with <html lang="de">
.
Until older versions of Chrome are phased out, you can use a MIT-based polyfill called Hyphenopoly Show archive.org snapshot . It will apply JS-based hyphenation if a feature test shows that CSS based hyphenation is not supported for the given locale. Note that Hyphenopoly is primarily a NodeJS module and targeted at server-side hyphenation, but it can be configured for the client-side as well.
Unicode has a
soft hyphen character
Show archive.org snapshot
you can use to mark optional word division opportunities. The soft hyphen is an invisible character with zero width. Only when the browser decides to wrap at a soft hyphen, it is turned into a regular hyphen character (‐
).
The HTML entity for a soft hyphen is ­
. Use it to mark division opportunities in a long word like so:
Do­nau­dampf­schiff­fahrt
Note that when copying a text with soft hyphens, the soft hyphen character will be copied as a zero-width character. This might lead to confusion since you can no longer search for the full word in the pasted text.
Note that test browsers will also see the soft hyphens, which makes testing uncomfortable.
You can use JavaScript libraries like hypher Show archive.org snapshot (includes LGPL patterns!) to automatically insert soft hyphens into the text of a DOM node.
Note that integrating such a library well requires some additional work on your part:
HTML has a
<wbr>
Show archive.org snapshot
tag you can use to mark word wrap opportunities:
Do<wbr>nau<wbr>dampf<wbr>schiff<wbr>fahrt
Like a soft hyphen, the <wbr>
tag is invisible. Unlike a soft hyphen, the browser will not insert a hyphen character when wrapping at a <wbr>
. This makes it a good choice to wrap non-natural language like URLs or source code.
Unlike soft hyphens a <wbr>
tag will not be included in the clipboard when copying text.
You can use the CSS property
overflow-wrap
Show archive.org snapshot
to allow browsers to force words that are wider than their container to be broken.
overflow-wrap: break-word
A few things:
word-wrap
was renamed to
overflow-wrap
Show archive.org snapshot
in CSS3. To support Internet Explorer or Edge, use the legacy name word-wrap
.word-break
CSS property which sounds similar, but actually controlls white-space breaking. A word-break: break-all
will break after the last character that fits in a line and is rarely what you want.overflow-wrap: break-word
when (uncontrollable) texts might break your layout, e.g. in a list of URLs.