Loading lesson path

CSS•Advanced Styling

CSS Text Effects

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind CSS Text Effects?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___: 200px;

3Order

Put the learning moves in the order that makes the concept easiest to apply.

CSS word-break Property

CSS word-wrap Property

CSS text-overflow Property

CSS has some properties to handle text overflow, word wrapping, line breaking rules and writing modes.

In this chapter you will learn about the following properties:

text-overflow - Specifies how to handle overflowed content
word-wrap - Allows long words to be able to be broken and wrap onto the next line
word-break - Specifies line breaking rules
writing-mode - Specifies whether lines of text are laid out horizontally or vertically

CSS text-overflow Property

The CSS text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped or rendered with ellipsis (...).

Both of the following properties are required for text-overflow to take effect:

white-space: nowrap;
overflow: hidden;

Here, the overflowed content is clipped:

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

Here, the overflowed content is rendered with ellipsis (...):

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

Example

Formatted code

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;
}

Live preview

The CSS code is as follows

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

Example

Formatted code

p:hover {
  overflow: visible;
}

Live preview

CSS word-wrap Property

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:

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.

Example

Formatted code

p {
  word-wrap: break-word;
}

Live preview

CSS word-break Property

The CSS word-break property specifies how words should break when reaching the end of a line.

This property can take one of the following values:

normal - This is default. Uses the default line breaking rules of the language
break-all - Allows words to be broken at any character to prevent overflow
keep-all - Prevents words from breaking

Here, we use normal :

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

Here, we use break-all :

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

Example

Formatted code

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

Live preview

CSS writing-mode Property

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

This property can take one of the following values:

horizontal-tb - Default. The text flows horizontally from left to right, vertically from top to bottom
vertical-rl - The text flows vertically from top to bottom, horizontally from right to left
vertical-lr - The text flows vertically from top to bottom, horizontally from left to right

Here is a text with a span element with a vertical-rl writing-mode.

The following example shows some different writing modes:

Example

Formatted code

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

Live preview

CSS Text Effect Properties

The following table lists the CSS text effect properties:

Property	Description
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

CSS Box Shadow

CSS Custom Fonts

Loading lesson path

CSS•Advanced Styling

CSS Text Effects

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind CSS Text Effects?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___: 200px;

3Order

Put the learning moves in the order that makes the concept easiest to apply.

CSS word-break Property

CSS word-wrap Property

CSS text-overflow Property

CSS has some properties to handle text overflow, word wrapping, line breaking rules and writing modes.

In this chapter you will learn about the following properties:

text-overflow - Specifies how to handle overflowed content
word-wrap - Allows long words to be able to be broken and wrap onto the next line
word-break - Specifies line breaking rules
writing-mode - Specifies whether lines of text are laid out horizontally or vertically

CSS text-overflow Property

The CSS text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped or rendered with ellipsis (...).

Both of the following properties are required for text-overflow to take effect:

white-space: nowrap;
overflow: hidden;

Here, the overflowed content is clipped:

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

Here, the overflowed content is rendered with ellipsis (...):

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

Example

Formatted code

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;
}

Live preview

The CSS code is as follows

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

Example

Formatted code

p:hover {
  overflow: visible;
}

Live preview

CSS word-wrap Property

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:

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.

Example

Formatted code

p {
  word-wrap: break-word;
}

Live preview

CSS word-break Property

The CSS word-break property specifies how words should break when reaching the end of a line.

This property can take one of the following values:

normal - This is default. Uses the default line breaking rules of the language
break-all - Allows words to be broken at any character to prevent overflow
keep-all - Prevents words from breaking

Here, we use normal :

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

Here, we use break-all :

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

Example

Formatted code

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

Live preview

CSS writing-mode Property

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

This property can take one of the following values:

horizontal-tb - Default. The text flows horizontally from left to right, vertically from top to bottom
vertical-rl - The text flows vertically from top to bottom, horizontally from right to left
vertical-lr - The text flows vertically from top to bottom, horizontally from left to right

Here is a text with a span element with a vertical-rl writing-mode.

The following example shows some different writing modes:

Example

Formatted code

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

Live preview

CSS Text Effect Properties

The following table lists the CSS text effect properties:

Property	Description
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

CSS Box Shadow

CSS Custom Fonts