CSS Text Overflow and Word Wrap

CSS Text Effects

Overflowing text, word wrapping, line breaking rules and writing modes all have dedicated CSS properties.

This chapter covers four of them:

text-overflow — what happens to content that overflows
word-wrap — lets a long word split and continue on the next line
word-break — the rules for breaking lines
writing-mode — horizontal or vertical layout for lines of text

CSS text-overflow Property

When content overflows and stays hidden, the CSS text-overflow property decides how the user is told about it: the text is either clipped or ends in an ellipsis (...).

It has no effect unless two other declarations are present:

white-space: nowrap;
overflow: hidden;

Example

Two treatments of overflowed text: clipped in the first paragraph, ended with an ellipsis (...) in the second.

Show two paragraphs with CSS text-overflow. The first paragraph uses text-overflow: clip and the second uses text-overflow: ellipsis. Both have a 200px width, 1px solid black border, white-space: nowrap, and overflow: hidden. Use a long text that overflows the container.

> Output: complete HTML page

Prompt

Show two paragraphs with CSS text-overflow. The first paragraph uses text-overflow: clip and the second uses text-overflow: ellipsis. Both have a 200px width, 1px solid black border, white-space: nowrap, and overflow: hidden. Use a long text that overflows the container.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS text-overflow</title>
<style>
p.test1 {
  width: 200px;
  border: 1px solid #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  width: 200px;
  border: 1px solid #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
</head>
<body>

<h2>text-overflow: clip:</h2>
<p class="test1">This is some long text that will not fit in the box</p>

<h2>text-overflow: ellipsis:</h2>
<p class="test2">This is some long text that will not fit in the box</p>

</body>
</html>

Hover to show overflow

Here the overflowed content comes back into view the moment you hover over the element.

Show a paragraph with text-overflow: ellipsis, white-space: nowrap, overflow: hidden, and a 200px width with a black border. On hover, set overflow to visible so the full text is shown.

> Output: complete HTML page

Prompt

Show a paragraph with text-overflow: ellipsis, white-space: nowrap, overflow: hidden, and a 200px width with a black border. On hover, set overflow to visible so the full text is shown.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS text-overflow hover</title>
<style>
p.test {
  width: 200px;
  border: 1px solid #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

p.test:hover {
  overflow: visible;
}
</style>
</head>
<body>

<p>Hover over the paragraph below to see the full text.</p>

<p class="test">This is some long text that will not fit in the box</p>

</body>
</html>

CSS word-wrap Property

A word too long for its area simply sticks out of it. The CSS word-wrap property stops that by letting long words break and continue on the next line.

In other words, it forces the text to wrap, even when the split falls in the middle of a word.

Example

A long word breaks here and continues on the next line.

Show a paragraph containing a very long unbroken word (like "thisisaveryveryveryveryveryverylongword") with word-wrap: break-word applied so the long word breaks and wraps onto the next line. Use an 11em wide container.

> Output: complete HTML page

Prompt

Show a paragraph containing a very long unbroken word (like "thisisaveryveryveryveryveryverylongword") with word-wrap: break-word applied so the long word breaks and wraps onto the next line. Use an 11em wide container.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS word-wrap</title>
<style>
p {
  width: 11em;
  border: 1px solid #000000;
  word-wrap: break-word;
}
</style>
</head>
<body>

<h2>word-wrap: break-word</h2>

<p>This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>
</html>

CSS word-break Property

What happens to words that reach the end of a line is up to the CSS word-break property.

It accepts one of three values:

normal — the language's default line breaking rules apply
break-all — to prevent overflow, a word may break at any character
keep-all — words are kept from breaking

Example

Compare word-break: normal in the first paragraph with word-break: break-all in the second.

Show two paragraphs demonstrating word-break values. The first uses word-break: normal with hyphenated text, the second uses word-break: break-all. Both should be in a narrow container with a border to show how the text breaks differently.

> Output: complete HTML page

Prompt

Show two paragraphs demonstrating word-break values. The first uses word-break: normal with hyphenated text, the second uses word-break: break-all. Both should be in a narrow container with a border to show how the text breaks differently.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS word-break</title>
<style>
p.test1 {
  width: 140px;
  border: 1px solid #000000;
  word-break: normal;
}

p.test2 {
  width: 140px;
  border: 1px solid #000000;
  word-break: break-all;
}
</style>
</head>
<body>

<h2>word-break: normal</h2>
<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>

<h2>word-break: break-all</h2>
<p class="test2">This paragraph contains some text. The lines will break at any character.</p>

</body>
</html>

CSS writing-mode Property

Lines of text can run horizontally or vertically, and the CSS writing-mode property chooses between the two.

It accepts one of three values:

horizontal-tb — the default: text runs horizontally from left to right, and lines stack vertically from top to bottom
vertical-rl — text runs vertically from top to bottom, and lines stack horizontally from right to left
vertical-lr — text runs vertically from top to bottom, and lines stack horizontally from left to right

Example

Several writing modes at work, covering both horizontal and vertical text layout.

Show examples of CSS writing-mode. Include a paragraph with horizontal-tb (default), a paragraph containing a span with writing-mode: vertical-rl, and a third paragraph entirely set to writing-mode: vertical-rl. Add borders to visualize each.

> Output: complete HTML page

Prompt

Show examples of CSS writing-mode. Include a paragraph with horizontal-tb (default), a paragraph containing a span with writing-mode: vertical-rl, and a third paragraph entirely set to writing-mode: vertical-rl. Add borders to visualize each.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS writing-mode</title>
<style>
p.test1 {
  writing-mode: horizontal-tb;
}

span.test2 {
  writing-mode: vertical-rl;
}

p.test3 {
  writing-mode: vertical-rl;
}
</style>
</head>
<body>

<h2>writing-mode: horizontal-tb</h2>
<p class="test1">This is a paragraph with writing-mode: horizontal-tb (default).</p>

<h2>Vertical text inside a span</h2>
<p>Here is a text with a <span class="test2">span element with a vertical-rl writing-mode</span>.</p>

<h2>writing-mode: vertical-rl</h2>
<p class="test3">This is a paragraph with writing-mode: vertical-rl.</p>

</body>
</html>

CSS Text Effect Properties

The CSS text effect properties at a glance:

text-justify — the alignment and spacing of justified text
text-overflow — how the user is told about overflowed content that stays hidden
word-break — the line breaking rules applied to words
word-wrap — permits long words to break and continue on the next line
writing-mode — whether lines of text run horizontally or vertically