This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size. Tap Here!

Smartphone icons created by Freepik - Flaticon

12.2 CSS Text Effects

In this chapter you will learn about the following properties:

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

CSS Text Overflow

The CSS text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.
It can be clipped:

This is some long text that will not fit in the box

or it can be rendered as an ellipsis (…):

This is some long text that will not fit in the box

The CSS code is as follows:

Example 1: Using the text-overflow property

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;

The following example shows how you can display the overflowed content when hovering over the element:

Example 2: Using text-overflow with hover

div.test:hover {
  overflow: visible;
}

CSS Word Wrapping

The CSS word-wrap property allows long words to be able to be broken and wrap onto the next line.
If a word is too long to fit within an area, it expands outside:

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

The CSS code is as follows:

Example 3: The word-wrap property

p {
  word-wrap: break-word;
}

CSS Word Breaking

The CSS word-break property specifies line breaking rules.

The CSS code is as follows:

Example 4: The word-break property

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

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

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:

Example 5: The writing-mode property

p.test1 {
  writing-mode: horizontal-tb;
}

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

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

CSS Text Effect Properties

The following table lists the CSS text effect properties:

Property	Description
text-align-last	Specifies how to align the last line of a text
text-justify	Specifies how justified text should be aligned and spaced
text-overflow	Specifies how overflowed content that is not displayed should be signaled to the user
word-break	Specifies line breaking rules for non-CJK scripts
word-wrap	Allows long words to be able to be broken and wrap onto the next line
writing-mode	Specifies whether lines of text are laid out horizontally or vertically