CSS - Text Effects

Quiz

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 an HTML document. In this chapter, we will learn how to add effects to texts in CSS.

What are Text Effects in CSS?

The following are the text effects commonly used in CSS:

text-overflow: It specifies how to manage the text that is overflowing the container.
word-wrap: It specifies to break the long words that are overflowing from the container.
word-break: It specifies to break the words that are separated by the hyphens when the text is overflowing container.
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 the CSS Text Styling chapter.

Text Overflow

The text-overflow property 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 CSS text-overflow property is as follows:

p{
    text-overflow: clip | ellipsis;
}

Example

The following example demonstrates the use of text-overflow property with clip and ellipsis values on the paragraph element.

<html>
<head>
    <style>
        p{
            white-space: nowrap; 
            border: 2px solid;
            width: 40%; 
            overflow: hidden;
            padding: 2%;
        }

        .txt1{
            text-overflow: clip;
        }

        .txt2 {
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <h3> Text overflow clip </h3>
    <p class="txt1"> 
        This is some large amount of text to understand text 
        overflow property
    </p>

    <h3> Text overflow ellipsis </h3>
    <p class="txt2"> 
        This is some large amount of text to understand text 
        overflow property 
    </p>
</body>
</html>

Word Wrap

The word-wrap property 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 CSS word-wrap property is as follows:

p{
    word-wrap: normal | break-word;
}

Example

In this example, we have used word-wrap property with normal and break-word. The text with normal overflows the container, while with word-break, the word is broken to fit the container.

<html>
<head>
    <style>
        p{
            border: 2px solid;
            width: 40%; 
            padding: 2%;
        }

        .txt1{
            word-wrap: normal;
        }

        .txt2 {
            word-wrap: break-word;
        }
    </style>
</head>

<body>
    <h3> Word wrap normal </h3>
    <p class="txt1"> 
        ThisIsAVeryLongWordThatWillNotBreakAndWillOverflowItsContainer 
    </p>

    <h3> Word wrap break-word </h3>
    <p class="txt2"> 
        ThisIsAVeryLongWordThatWillBreakAndWrapOntoTheNextLine 
    </p>
</body>
</html>

Word Break

The word-break property 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 CSS word-break property is as follows:

p{
    word-break: normal | break-all | keep-all;
}

Example

In this example, we have used the word-break property with 'normal', 'break-all', and 'keep-all' property values on the paragraph element.

<html>
<head>
    <style>
        p{
            border: 2px solid;
            width: 40%; 
            padding: 2%;
        }

        .txt1{
            word-break: break-all;
        }

        .txt2 {
            word-break: keep-all;
        }
    </style>
</head>

<body>
    <h3> Word break break-all </h3>
    <p class="txt1"> 
        This-paragraph-contains-some-text.-This-line-will-not-
        break-at-hyphens.
    </p>

    <h3> Word break keep-all </h3>
    <p class="txt2"> 
        This-paragraph-contains-some-text.-This-line-will-break
        -at-hyphens.
    </p>
</body>

</html>

Writing Mode

The writing-mode property 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 CSS writing-mode property is as follows:

p{
    writing-mode: horizontal-tb | vertical-rl | vertical-lr;
}

Example

The following example uses the writing-mode property to define the direction of the text of the paragraph element.

<html>
<head>
    <style>
        p{
            border: 2px solid;
            width: 200px; 
            padding: 2%;
        }

        .txt1{
            writing-mode: horizontal-tb;
        }

        .txt2 {
            writing-mode: vertical-rl;
        }

        .txt3 {
            writing-mode: vertical-lr;
        }
    </style>
</head>

<body>
    <h3> Writing mode horizontal-tb </h3>
    <p class="txt1"> 
        This text is written in the traditional horizontal 
        direction from left to right
    </p>

    <h3> Writing mode vertical-rl </h3>
    <p class="txt2"> 
        This text is written vertically from top to bottom, 
        with lines stacked right to left
    </p>

    <h3> Writing mode vertical-lr </h3>
    <p class="txt3"> 
        This text is written vertically from top to bottom, 
        with lines stacked left to right
    </p>
</body>

</html>

CSS Text Effects Related Properties

Following is the list of CSS properties of styling text:

Property	Description	Example
text-overflow	Specifies how to manage the text that are overflowing the container.	Try It
word-wrap	Specifies to break the long words that are overflowing container.	Try It
word-break	Specifies to break the words that are separated by the hyphens when text is overflowing container.	Try It
writing-mode	Specifies horizontal and vertical writing modes of text.	Try It
text-justify	Specifies the justification method of text when text-align is set to "justify".	Try It

Print Page