CSS - Text Effects

CSS text effects are used to manage styles of text by setting overflow rules, wrapping rules, line-breaking rules and writing modes to text. The text effects allow us to apply different types of effects on text used in anHTMLdocument. In this chapter, we will learn how to add effects to texts inCSS.

<h2 id="">Table of Contents</h2>

<ul>

<li>What are Text Effects in CSS</li>

<li>Different Text Effect Properties

<ul>

<li>Text Overflow Property</li>

<li>Word Wrap Property</li>

<li>Word Break Property</li>

<li>Writing Mode Property</li>

</ul>

</li>

</ul>

What are Text Effects in CSS?

The following are the text effects commonly used in CSS:

1. text-overflow:It specifies how to manage the text that is overflowing the container.
2. word-wrap:It specifies to break the long words that are overflowing from the container.
3. word-break:It specifies to break the words that are separated by the hyphens when the text is overflowing container.
4. writing-mode:It specifies the horizontal and vertical writing modes of the text.

We will see examples for all of these properties in upcoming sections. There are several other properties related to the text in CSS, we have covered all of those in theCSS Text Stylingchapter.

Text Overflow

Thetext-overflowproperty is used to control the text that exceeds the parent’s width. You can clip the text that exceeds the width of the parent or add an ellipsis(…) to indicate text continues.

Syntax

The syntax for the CSStext-overflowproperty is as follows:

p{

    text-overflow: clip | ellipsis;

}

Example

The following example demonstrates the use oftext-overflowproperty withclipandellipsisvalues on theparagraphelement.

Word Wrap

Theword-wrapproperty is used to allow long words to be able to be broken and wrapped onto the next line. This ensures that the content fits within its container, preventing overflow.

Syntax

The syntax for the CSSword-wrapproperty is as follows:

p{

    word-wrap: normal | break-word;

}

Example

In this example, we have usedword-wrapproperty withnormalandbreak-word. The text with normal overflows the container, while with word-break, the word is broken to fit the container.

Word Break

Theword-breakproperty is used to specify how words should break when reaching the end of a line. This property is particularly useful for handling text that doesn’t naturally wrap well, such as long words or URLs.

Syntax

The syntax for the CSSword-breakproperty is as follows:

p{

    word-break: normal | break-all | keep-all;

}

Example

In this example, we have used theword-breakproperty with ‘normal’, ‘break-all’, and ‘keep-all’ property values on the paragraph element.

Writing Mode

Thewriting-modeproperty is used to define the direction in which text is written within a block. This property is especially useful for supporting languages that are written vertically or for creating rotated text effects.

Syntax

The syntax for the CSSwriting-modeproperty is as follows:

p{

    writing-mode: horizontal-tb | vertical-rl | vertical-lr;

}

Example

The following example uses thewriting-modeproperty to define the direction of the text of the paragraph element.

CSS Text Effects Related Properties

Following is the list of CSS properties of styling text:

PropertyDescriptionExampletext-overflowSpecifies how to manage the text that are overflowing the container.Try Itword-wrapSpecifies to break the long words that are overflowing container.Try Itword-breakSpecifies to break the words that are separated by the hyphens when text is overflowing container.Try Itwriting-modeSpecifies horizontal and vertical writing modes of text.Try Ittext-justifySpecifies the justification method of text when text-align is set to “justify”.Try It