How to manage long words when they do not fit to the screen or within a narrow container.

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.

CSS code for horizontal scroll .container-name { overflow-x: auto; }

Demo for horizontal scroll

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:

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.

HTML code for <wbr> <p>Lorem<wbr>ipsum<wbr>dolor<wbr>sit<wbr>amet</p>

Demo for <wbr>

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.

HTML code for soft hyphen <p>Lorem­ipsum­dolor­sit­amet</p>

Demo for soft hyphen

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:

white-space

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

white-space: normal

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

The text is wrapped to fit the container.

to fit the container. Multiple spaces and tabs are collapsed to a single space .

and are collapsed to a . Soft break lines are converted to single space.

CSS code for white-space: normal .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.

to fit the container. Multiple spaces and tabs are collapsed to a single space .

and are collapsed to a . Soft break lines are converted to single space.

CSS code for white-space: nowrap .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.

to fit the container. Multiple spaces and tabs are preserved as is.

and are as is. Soft break lines are also preserved.

CSS code for white-space: pre .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.

to fit the container. Multiple spaces and tabs are preserved as is.

and are as is. Soft break lines are also preserved.

CSS code for white-space: pre-wrap .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.

to fit the container. Multiple spaces and tabs are collapsed to a single space .

and are collapsed to a . Soft break lines are preserved as is.

CSS code for white-space: pre-line .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.

to fit the container. Multiple spaces and tabs are preserved but are hanged at the end of the line.

and are but are at the end of the line. Soft break lines are also preserved.

CSS code for white-space: break-spaces .example { white-space: break-spaces; }

Demo for white-space

word-break

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

word-break: normal

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

CSS code for word-break: normal .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.

CSS code for word-break: break-all .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.

CSS code for word-break: keep-all .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.

CSS code for word-break: break-word .example { word-break: break-word; }

Demo for word-break

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:

overflow-wrap: normal

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

CSS code for overflow-wrap: normal .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.

CSS code for overflow-wrap: anywhere .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.

CSS code for overflow-wrap: break-word .example { overflow-wrap: break-word; }

Demo for overflow-wrap

line-break

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

line-break: auto

The auto value inserts line breaks using the default rules.

CSS code for line-break: auto .example { line-break: auto; }

line-break: loose

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

CSS code for line-break: loose .example { line-break: loose; }

line-break: normal

The normal value uses the most common line break rules.

CSS code for line-break: normal .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.

CSS code for line-break: strict .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.

CSS code for line-break: anywhere .example { line-break: anywhere; }

Demo for line-break

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.