Wrapping long words with CSS or HTML

When a word is longer that the container’s width, a horizontal scroll on the page level will appear. There are 3 different ways to handle this issue and avoid unexpected horizontal scrolls.

The lazy way: Scrolling within the container

The easiest way is to add in CSS an optional horizontal scroll on the container.

.container-name {
	overflow-x: auto;
}

From usability and accessibility perspectives horizontal scroll —either on page level or within containers— is not a recommended practice. There are rare cases that a horizontal scroll can be an acceptable solution; but it depends highly on the content type.

As a generic rule, content that should be legible, should always be visible without any need to interact with it.

Additionally, the horizontal scroll on containers might introduce interaction issues that will affect usability. Modern browsers have assigned actions on interacting with horizontal scroll, such as: swipe/scroll from left to right, navigates to the previous page.

The hard‐coded way: Markup

There are 2 different ways to break words by modifing the markup structure:

1. Using the <wbr> element
2. Using the “soft hyphen” ­ unicode character

The <wbr> element

The <wbr> element breaks the word in the position that is inserted only when the content does not fit the container, without showing any additional character. In fact, the element is never visible in any case, behaving very similar with the “zero‐width space” (​) unicode character.

<p>Lorem<wbr>ipsum<wbr>dolor<wbr>sit<wbr>amet</p>

The <wbr> element is usefull for some cases, such as for CJK (Chinese, Japanese, and Korean) languages, when we need to control and introduce an optional word/line break, while we disallow the line breaks in any other part of the text.

The soft hyphen character

The ­ character breaks the word and renders a hyphen character, only when the content does not fit the container.

<p>Lorem&shy;ipsum&shy;dolor&shy;sit&shy;amet</p>

While the ­ character is a useful solution for most western languages, it is not a very useful solution for CJK languages, since the hyphen character does not exist as a word breaking option.

On the other hand, modern browsers have hyphenation capabilities through the hyphens CSS property, but this property works only for the supported languages. For example Firefox does not support the Greek language for hyphenation — while Safari does support Greek. With the ­ character we can simulate a hyphenated text even for non‐supported languages and on all browsers.

The optimal way: CSS

There are 4 CSS properties that can help to handle text wrapping:

1. white-space
2. word-break
3. overflow-wrap / word-wrap
4. line-break

white-space

The white-space is managing how spaces are rendered; and can take 6 values:

1. normal (default value)
2. nowrap
3. pre
4. pre-wrap
5. pre-line
6. break-spaces

white-space: normal

The default normal value renders text based on the following rules:

• The text is wrapped to fit the container.
• Multiple spaces and tabs are collapsed to a single space.
• Soft break lines are converted to single space.

.example {
	white-space: normal;
}

white-space: nowrap

The nowrap value renders text based on the following rules:

• The text is not wrapped to fit the container.
• Multiple spaces and tabs are collapsed to a single space.
• Soft break lines are converted to single space.

.example {
	white-space: nowrap;
}

white-space: pre

The pre value renders text based on the following rules:

• The text is not wrapped to fit the container.
• Multiple spaces and tabs are preserved as is.
• Soft break lines are also preserved.

.example {
	white-space: pre;
}

white-space: pre-wrap

The pre-wrap value renders text based on the following rules:

• The text is wrapped to fit the container.
• Multiple spaces and tabs are preserved as is.
• Soft break lines are also preserved.

.example {
	white-space: pre-wrap;
}

white-space: pre-line

The pre-line value renders text based on the following rules:

• The text is wrapped to fit the container.
• Multiple spaces and tabs are collapsed to a single space.
• Soft break lines are preserved as is.

.example {
	white-space: pre-line;
}

white-space: break-spaces

The break-spaces value renders text based on the following rules:

• The text is wrapped to fit the container.
• Multiple spaces and tabs are preserved but are hanged at the end of the line.
• Soft break lines are also preserved.

.example {
	white-space: break-spaces;
}

word-break

The word-break is managing how line breaks are rendered; and can take 4 values:

1. normal (default value)
2. break-all
3. keep-all
4. break-word

word-break: normal

The normal value renders the text based on the default line break rules.

.example {
	word-break: normal;
}

word-break: break-all

The break-all value inserts a line break anywhere between characters. It’s a useful setting mainly for CJK languages.

.example {
	word-break: break-all;
}

word-break: keep-all

The keep-all value is applied only on CJK languages, where it keeps the text lines and is not inserting any line breaks. For all other languages, is the same as the normal value.

.example {
	word-break: keep-all;
}

word-break: break-word

The break-word value inserts a line break only when is required, to avoid an overflow.

.example {
	word-break: break-word;
}

overflow-wrap / word-wrap

The overflow-wrap is enabling the line breaks. The legacy property name is word-wrap which was supported from previous versions of most browsers.

It can take 3 values:

1. normal (default value)
2. anywhere
3. break-word

overflow-wrap: normal

The normal value inserts line breaks only when spaces or other hyphenation “breaking” characters exists.

.example {
	overflow-wrap: normal;
}

overflow-wrap: anywhere

The anywhere value inserts line breaks when words are exceeding the width of the container, to avoid overflow.

.example {
	overflow-wrap: anywhere;
}

overflow-wrap: break-word

The break-word value inserts line breaks when words are exceeding the width of the container, to avoid overflow; but soft wraps are not calculated in the content sizes.

.example {
	overflow-wrap: break-word;
}

line-break

The line-break is managing how line breaks are rendered mainly for CJK languages; and can take 5 values:

1. auto (default value)
2. loose
3. normal
4. strict
5. anywhere

line-break: auto

The auto value inserts line breaks using the default rules.

.example {
	line-break: auto;
}

line-break: loose

The loose value uses lest restrictive line break rules that are mainly useful for short lines.

.example {
	line-break: loose;
}

line-break: normal

The normal value uses the most common line break rules.

.example {
	line-break: normal;
}

line-break: strict

The strict value uses the strict line break rules; For example the Japanese yōon kana (拗音) characters are never breaking within.

.example {
	line-break: strict;
}

line-break: anywhere

The anywhere value inserts line breaks in any position on the words, without following any hypheration rules (such as the Unicode Line Breaking Algorith) and without adding any hyphernation character.

The line-break: anywhere renders similar as if we inserted a <wbr> character after every character or space.

.example {
	line-break: anywhere;
}

Future CSS solutions

Finally, there is a new CSS property: white-space-collapse specified in CSS Text Module Level 4 that will allow to control further how the spaces and line breaks are rendering.

As for today (May 2019) there is still no browser that supports this property.