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: hidden;
	overflow-x: auto;
}

Horizontal scroll demo

From usability and accessibility perspectives, the horizontal scrolling can be an acceptable approach; but it depends highly on the content.

As a generic rule, content that should be legible, should always be visible without any interaction from the user.

The horizontal scroll on a container, might also introduce interaction issues. 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 ‘soft hyphen’ ­ unicode character

The <wbr> element

The <wbr> element breaks the word in the position that is inserted, without showing any additional character. In fact, the element is never visible for any case, behaving very similar with the “zero‐width space” ​ unicode character.

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

<wbr> demo

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.

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

Soft hyphen demo

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 supported languages. For example Firefox does not support Greek language for hyphenation — while Safari does support Greek . With the ­ character we can simulate a hyphenated text for non‐supported languages 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.
• 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;
}

white-space demo

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.

.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;
}

word-break demo

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 ‘breakable’ 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;
}

overflow-wrap demo

line-break

Finally, the line-break is managing how line breaks are rendered for CJK languages ; and can take 4 values:

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 demo

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 ( 29 May 2019 ) there is still no browser that supports this property.