CSS Text Effects

CSS Text Overflow, Whole Word Wrapping, Line Breaking 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 hidden overflow content 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 presented 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 an 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 expand 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 the text to wrap - even if it means breaking the 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 Breaking Rules

CSS word-break This property specifies the line breaking 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 lines are 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 Effects Properties

The following table lists the CSS text effects properties:

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