CSS Text Effects

CSS text overflow, word wrap, line break rules, and writing modes

In this chapter, you will learn about the following properties:

  • text-overflow
  • word-wrap
  • word-break
  • writing-mode

CSS Text Overflow

CSS text-overflow The property specifies how the overflow content that is not displayed should be presented to the user.

It can be clipped:

This is some long text that cannot be contained within a box. This is some long text that cannot be contained within a box

It can also be displayed as an ellipsis (...):

This is some long text that cannot be contained within a box. This is some long text that cannot be contained within a box

The CSS code is as follows:

Example

p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip; 
}
p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}

Try it yourself

The following example shows how to display overflow content when the mouse is hovered over the element:

Example

div.test:hover {
  overflow: visible;
}

Try it yourself

CSS Word Wrapping

CSS word-wrap This property allows long text to be broken and wrapped to the next line.

If a word is too long to fit within an area, it will extend outward:

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

With the word-wrap property, you can force text wrapping - even if it means splitting a word in the middle:

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

The CSS code is as follows:

Example

It allows long words to be broken and wrapped to the next line:

p {
  word-wrap: break-word;
}

Try it yourself

CSS Line Break Rules

CSS word-break This property specifies the line break rules.

This paragraph contains some text. This line will break at hyphens.

This paragraph contains some text. This line will break at hyphens.

This paragraph contains some text. These lines will break at any character.

This paragraph contains some text. The lines will break at any character.

The CSS code is as follows:

Example

p.test1 {
  word-break: keep-all;
}
p.test2 {
  word-break: break-all;
}

Try it yourself

CSS Writing Modes

CSS writing-mode This property specifies whether the text line is horizontally or vertically aligned.

Some text with a span element with a vertical-rl writing-mode.

The following examples demonstrate some different writing modes:

Example

p.test1 {
  writing-mode: horizontal-tb; 
}
span.test2 {
  writing-mode: vertical-rl; 
}
p.test2 {
  writing-mode: vertical-rl; 
}

Try it yourself

CSS Text Effect Properties

The following table lists the CSS text effect properties:

Attribute Description
text-align-last Specify how to align the last line of text.
text-justify Specify how aligned text should be aligned and spaced.
text-overflow Specify how to present the hidden overflow content to the user.
word-break Specify the line break rules for non-CJK scripts.
word-wrap Allow long words to be broken and moved to the next line.
writing-mode Specify whether the specified text line is horizontally or vertically placed.