« Previous Next »

CSS Text Effects

CSS Text Overflow, Word Wrap, Line Breaking, and Writing Modes

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

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

CSS text-overflow

The text-overflow property defines how hidden overflowed text is displayed.

It can be:

  • Clipped: Text is simply cut off.
  • Ellipsis (...): Text is replaced with ... to show truncation.
Output :

CSS Word Wrapping

The word-wrap property allows long words to break and wrap onto the next line.

If a word is too long to fit in its container, it may overflow like this:

Without word-wrap:

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

The word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word:

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

CSS Writing Mode

The CSS writing-mode property specifies whether lines of text are laid out horizontally or vertically.

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

The following example shows some different writing modes:

Output 3:
« Previous Next »