CSS Text Effects

CSS (Cascading Style Sheets) is the mechanism used to add style to web documents. Through CSS, we can apply various effects on text, enhancing its appearance and improving user experience on web pages.

In this article, we'll cover several key CSS properties that can be used to apply text effects, including:

1. text-overflow
2. word-wrap
3. word-break
4. writing-mode

Let's learn about each of these in detail:

1. Text-Overflow

The text-overflow property in CSS helps handle text that exceeds the width of its container. It defines how the overflowed content should be represented when the text doesn't fit within its container.

Syntax:

element {
 text-overflow: clip | ellipsis;
 //CSS Property
}

Values:

1. clip: This is the default value. It truncates the text at the edge of the content area, even if it cuts off characters in the middle.
2. ellipsis: Replaces the clipped text with an ellipsis (...). The ellipsis is displayed inside the content area and reduces the amount of visible text.

Example 1: text-overflow: clip

Output:

Example 2: text-overflow: ellipsis

Output:

2. Word Wrap

The CSS word-wrap property defines whether the browser is allowed to line break within words when a word is too long to fit within its parent container. If a word is too long to fit within an area, it expands outside: Syntax:

element {
 word-wrap: break-word;
 //CSS Property
}

Example:

Output:

3. Word Breaking

The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box. It specifies line breaking rules.

Syntax:

element {
 word-break: keep-all | break-all;
 //CSS Property
}

1. break-all: Breaks words at arbitrary points to prevent overflow.
2. keep-all: Prevents breaking words unless there are explicit line breaks.

Example: word-break: break-all

Output:

Example: word-break: keep-all

Output:

4. Writing Mode

The writing-mode property defines whether text is displayed horizontally (default) or vertically.

Syntax:

The writing-mode property defines whether text is displayed horizontally (default) or vertically.element {
 writing-mode: horizontal-tb | vertical-rl;
 //CSS Property
}

1. horizontal-tb: This is the default value of the property i.e text is read from left to right and top to bottom. The next horizontal line is positioned below the previous line.
2. vertical-rl: In this property the text is read from right to left and top to bottom. The next vertical line is positioned to the left of the previous line.

Example: writing-mode: horizontal-tb

Output:

Example: writing-mode: vertical-rl

Output: