CSS text-overflow Property – Specifying a Single-Line Text Ellipsis (…)

Definition and Usage

The text-overflow property specifies whether an ellipsis (...) is displayed to signal to the user that single-line text has overflowed the element's box and is hidden from view.

The text-overflow property is highly effective for displaying single-line text using an ellipsis (...).

Formal syntax

Values

Accepted values for the text-overflow property
`clip`	Initial value. Does not display an ellipsis. The hidden text is truncated at the edge of the content area.
`ellipsis`	Displays an ellipsis (`...`, U+2026) to represent the hidden overflowing text.

Usage Notes

To apply the text-overflow property, the element must meet the following conditions:

The element must be configured to prevent automatic line breaks, such as by setting the white-space property to nowrap.
The overflow property must be set to a value that hides overflowing content (e.g., hidden, scroll, or auto).
It only applies to block container elements with a specified width or height. Elements without a specified size will expand to fit the text, preventing an overflow from occurring.

When these conditions are met,
the text-overflow property can either cut off the hidden text (clip value) or display an ellipsis (..., ellipsis value) to indicate overflow.

Basic Example

CSS

div {
    width: 200px;
    border: 2px solid red;

    /* Required properties to prevent wrapping 
       and display an ellipsis (...) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

HTML

<div>
    This example demonstrates how to prevent automatic line breaks,
    hide overflowing text, and display an ellipsis (...)
    when the text reaches the end of the content box.
</div>

The implementation in this example uses the text-overflow property.
Once you understand how this property works, you can easily display single-line text without automatic wrapping (what is commonly known as 'soft wrapping') and use an ellipsis (...) to indicate that content has been hidden.

Detailed Explanation of the Example

The implementation in the example can be explained step by step:

This is a standard text area with no special CSS styles applied yet.

HTML

<div>
    This example demonstrates how to prevent automatic line breaks,
    hide overflowing text, and display an ellipsis (...)
    when the text reaches the end of the content box.
</div>

Specify the base styles for the <div> element, which serves as the container for the text in this example.

As you can see from the rendered example above, a standard text area automatically wraps the text when it reaches the end of the content box.

Specify white-space: nowrap to prevent the automatic wrapping (soft wrapping) mentioned above, forcing the text to overflow the container.

CSS Specifying base styles for the <div> element used as a text container

div {
    width: 200px;
    border: 2px solid red;
    white-space: nowrap; /* Prevents automatic wrapping and forces overflow */
}

HTML

<div>
    This example demonstrates how to prevent automatic line breaks,
    hide overflowing text, and display an ellipsis (...)
    when the text reaches the end of the content box.
</div>

The white-space property specifies how whitespace characters inside an element are handled and determines the rules for line wrapping. When white-space: nowrap is specified, the text will no longer automatically wrap (soft wrap) upon reaching the end of the content box.

As a result, the text overflows the container instead of breaking onto a new line.

Specify overflow: hidden to hide any text that exceeds the boundaries of the container.

CSS Specifying base styles for the <div> element used as a text container

div {
    width: 200px;
    border: 2px solid red;
    white-space: nowrap; /* Prevents automatic wrapping and forces overflow */
    overflow: hidden; /* Hides any text that overflows the container */
}

HTML

<div>
    This example demonstrates how to prevent automatic line breaks,
    hide overflowing text, and display an ellipsis (...)
    when the text reaches the end of the content box.
</div>

Specify text-overflow: ellipsis to display an ellipsis (...) indicating that text has been hidden due to overflow.

CSS Specifying base styles for the <div> element used as a text container

div {
    width: 200px;
    border: 2px solid red;
    white-space: nowrap; /* Prevents automatic wrapping and forces overflow */
    overflow: hidden; /* Hides any text that overflows the container */
    text-overflow: ellipsis; /* Displays an ellipsis (...) for hidden content */
}

HTML

<div>
    This example demonstrates how to prevent automatic line breaks,
    hide overflowing text, and display an ellipsis (...)
    when the text reaches the end of the content box.
</div>

When the text-overflow property is specified as ellipsis, an ellipsis (...) is displayed to indicate that content has been truncated, as shown in the rendered example above.

Syntax

CSS

/* Keyword values */
text-overflow: clip;
text-overflow: ellipsis;

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;

Formal definition

Formal definition of the text-overflow Property
Initial value	`clip`
Applies to	block container elements
Inherited	no
Animation	no

Things to Keep in Mind

The text-overflow property functions only when the following three conditions are specified:

The overflow property must not be specified as visible. It should be applied as hidden, clip, scroll, or auto.
The white-space property must prevent automatic wrapping (soft wrapping) at the end of the content box, typically by using nowrap or pre.
To ensure these properties function correctly, the element must be a block container with a specified width or height.

If any of these conditions are not met, the text-overflow property will not be applied. This is because the property is specifically designed to control the visual display of an ellipsis only when content is forced to overflow.

To limit text to a specific number of lines and display a multi-line ellipsis (...), the -webkit-line-clamp property is highly effective.