What are CSS text effect properties?

Overview

Text effect properties in CSS allow us to apply different formatting styles to the text within an HTML document. These styles can include splitting up words when a sentence is too long to fit within a line, changing its orientation, and applying any patterns that a programmer needs to add.

Types of text effect properties

• Text overflow
• Word wrap
• Word break
• Writing mode

Text-overflow

This property specifies how the text that overflows out of a boundary should be displayed to the user. This property must be used with two other properties:

• white-space: nowrap
• overflow: hidden

There are two types of showing overflown text:

1. Clipped

This type cuts the text at the end of the boundary when it is overflowing as follows:

2. Ellipses

This type adds ellipses or '...' at the end of the text that overflows, as shown below:

Syntax

The text-overflow property has a straightforward syntax and can take the following two properties as discussed earlier:

Code example

Explanation

In the code above, we define two classes of the p tag, where p.type1 creates the style for clipped type, and p.type2 specifies the style for the ellipses type of text-overflown. You can play around by changing the properties to understand it better.

Note: The white-space and overflow tags are used for text-overflow to work, as discussed before.

Word-wrap

The second CSS text effect property is word-wrap, which breaks long words and splits them into the next line. This happens when the last word in a sentence is too long to fit inside a boundary such that it can extend beyond as shown below:

With the word-wrap property, we can break up the long words to move to the next line for improved readability as follows:

Syntax

Code example

Word-break

The word-break property is similar to word-wrap because it enables us to specify how to break up paragraphs when they do not fit in a given boundary. It specifies how words at the end of the line should be broken up. There are two types of this property:

1. keep-all

This keeps all the words at the end of the line without breaking them. Instead, it moves the entire word to the next line as follows:

2. break-all

This value for word-break breaks all the words that are causing the line to spill over and splits them onto the next line:

Syntax

Code example

Writing-mode

This CSS property lets the programmer specify if they want the text to be displayed horizontally or vertically. It can be implemented within the p tag as well as a span tag.

Syntax

• horizontal-tb is the default value, which displays the text horizontally from left to right and vertically from top to bottom.
• vertical-rl displays the text vertically from top to bottom and horizontally from right to left.
• vertical-lr displays the text vertically from top to bottom and horizontally from left to right.

Code example

Explanation

• Line 5: We first define a class for the paragraph with writing mode as horizontal. This is also the default style of a text.
• Line 9: We define the vertical-rl styling to type2 class in the span tag.
• Line 13: We define the vertical-lr styling to type2 class in the p tag.