CSS Text Effects

CSS provides a set of properties that allow you to control the way text is displayed and wrapped within its container. In this chapter, we'll explore some of the most commonly used CSS text overflow, word wrap, line breaking rules, and writing modes.

Text Overflow

The text-overflow property controls what happens when text overflows its container. By default, text that overflows its container is hidden. However, you can change this behavior by setting the text-overflow property to "ellipsis", which adds an ellipsis (...) at the end of the text.

Example:

p {
 width: 200px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

In the above example, any text that overflows the 200px width of the paragraph will be hidden and replaced with an ellipsis.

Word Wrap

The word-wrap property controls whether or not long words can be broken and wrapped onto the next line.

Example:

p {
 width: 200px;
 word-wrap: break-word;
}

In the above example, long words in the paragraph will be broken and wrapped onto the next line if they exceed the 200px width of the paragraph.

Line Breaking Rules

The line-break property controls how lines are broken when text wraps.

Example:

p {
 word-break: break-all;
 hyphens: auto;
}

In the above example, long words in the paragraph will be broken at any point and wrapped onto the next line if they exceed the available width. Hyphens will be added to help with readability.

Writing Modes

The writing-mode property controls the direction in which text is written. This property is particularly useful for languages that are written from right to left.

Example:

p {
 writing-mode: vertical-rl;
 text-orientation: upright;
}

In the above example, the paragraph will be written vertically from right to left. The text-orientation property sets the orientation of the characters so that they are upright and readable.

By using these CSS properties, you can have greater control over how text is displayed on your web page.