How to Use Text Overflow with CSS

Introduction

The text-overflow property in CSS helps you manage how overflowed text is displayed when it exceeds the container's width. This is especially useful when dealing with long lines of text that need to be clipped, truncated, or indicated with an ellipsis (...).

In this tutorial, you'll learn how to use the text-overflow property to handle overflowing text within a fixed-width container.

Problem Statement

Create a CSS code that:

Controls how overflowing text is displayed using the text-overflow property.
Demonstrates how to clip, truncate, or add an ellipsis to overflowing text.

Example:

Input: A paragraph element with a long sentence inside a fixed-width container.
Output: The text either gets clipped or shows an ellipsis when it overflows the container.

Solution Steps

Use text-overflow Property: Apply the text-overflow property to control how overflowing text is handled.
Set white-space and overflow Properties: Use white-space and overflow in combination to properly manage the overflow effect.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Overflow Example</title>
    <style>
        /* Step 1: Basic text overflow with ellipsis */
        .text-ellipsis {
            white-space: nowrap;       /* Prevent text from wrapping to the next line */
            overflow: hidden;           /* Hide the overflowed text */
            text-overflow: ellipsis;    /* Add ellipsis to indicate overflow */
            width: 200px;               /* Set a fixed container width */
            border: 1px solid #ccc;
        }

        /* Step 2: Clip overflowing text */
        .text-clip {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: clip;        /* Clip the overflowed text */
            width: 200px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

    <p class="text-ellipsis">This is a long sentence that will be truncated with an ellipsis when it overflows the container width.</p>
    
    <p class="text-clip">This is another long sentence that will be clipped when it overflows the container width.</p>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Use `text-overflow: ellipsis`

To add an ellipsis (...) to overflowing text, use this CSS:
```
.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
    border: 1px solid #ccc;
}
```
- white-space: nowrap: Prevents text from wrapping to the next line.
- overflow: hidden: Hides the overflowing part of the text.
- text-overflow: ellipsis: Adds an ellipsis (...) to indicate that text has been truncated.

Step 2: Use `text-overflow: clip`

To clip the overflowing text without any indication, use this CSS:

.text-clip {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    width: 200px;
    border: 1px solid #ccc;
}

Conclusion

Using the text-overflow property in CSS allows you to control how text is displayed when it exceeds the container's width. By applying ellipsis or clip, you can ensure your layout remains clean and readable, even with long text strings.

Java Guides

Search This Blog