Posted about 3 years ago. Visible to the public. Repeats.

HTML: Making browsers wrap long words

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".

Option 1: Soft hyphens

Unicode has a soft hyphen character 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:

Copy
Do­nau­dampf­schiff­fahrt

Caveat: Unexpected copy & paste behavior

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.

Automatic insertion of soft hyphens

You can use JavaScript libraries like hypher 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:

  • Loading the correct hyphenization patterns for the language you're using
  • JavaScript to apply the library function to the DOM nodes you want hyphenated
  • Manually adding exceptions to words you don't want hyphenized. E.g. brand names like makandra should not be hyphenated.

Option 2: wbr-tags

HTML has a <wbr> tag you can use to mark word wrap opportunities:

Copy
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.

Option 3: word-wrap (or overflow-wrap) CSS property

You can use the CSS property word-wrap to allow browsers to force words that are wider than their container to be broken.

Copy
word-wrap: break-word

A few things:

  • word-wrap was renamed to overflow-wrap in CSS3. To support Internet Explorer or Edge, use the legacy name word-wrap.
  • Do not confuse this with the 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.
  • We recommend you use word-wrap: break-word when (uncontrollable) texts might break your layout, e.g. in a list of URLs.
  • Here is an example: https://jsfiddle.net/51dyzyxm/

Option 4: hyphens CSS property

In the future browsers will be able to hyphenate natively on all elements with the CSS property hyphens:

Copy
hyphens: auto

There will also be hyphens: none (disable hyphenations even at &shy; entities) and hyphens: manual (hyphenation at &shy; only).

Unfortunately Chrome does not currently support hyphens on Windows and Linux (issue).

There is a polyfill we have not tried yet.

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for old versions of Ruby on Rails (3.2 and 2.3).

Owner of this card:

Avatar
Henning Koch
Last edit:
7 months ago
by Dominik Schöler
Keywords:
wrap, silbentrennung, bindestrich, viertelgeviertstrich
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more