This page is Not Ready

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

text-overflow-ellipsis

Summary

The text-overflow-ellipsis CSS property controls how the hint on overflowed content that is not displayed is signaled to the users. The presence of the hint is controlled with CSS property text-overflow-mode. Shorthand property is text-overflow.

Overview table

Initial value
U+2026
Applies to
block-level and inline-block elements
Inherited
No
Media
visual
Computed value
specified value (except for initial and inherit)
Animatable
No
CSS Object Model Property
text-overflow-ellipsis
Percentages
N/A

Syntax

  • text-overflow-ellipsis: string

Values

string
The value is defined either as a string like the default UTF-8 character ‘U+2026’ or a URI and represents the ellipsis of text-overflow-mode property. If the value is defined as a URI it displays the image behind the URL. You can also set both values which then means they determine the overflow visual hint at the end and the hint after the element box. The latter visual hint is only displayed if there is clipped content because of the dimension limitation on the element block.

Examples

<!-- example showing text-overflow-ellipsis property -->

<div class="overflowed overflowed-ellipsis">
    <p>This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>
</div>
<div class="overflowed overflowed-ellipsis-word">
    <p>This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>
</div>

View live example

.overflowed > p {
    width: 10em;
    height: 5em;
    white-space: nowrap;
    overflow: hidden;
}

.overflowed-ellipsis > p {
    text-overflow-mode: ellipsis;
    text-overflow-ellipsis: '[more]';
}

.overflowed-ellipsis-word > p {
    text-overflow-mode: ellipsis-word;
    text-overflow-ellipsis: '[more]';
}

View live example

Usage

 Currently it is not widely supported in any major browsers.

Notes

Because the initial value (U+2026) of the overflow visual hint after the element box may not be easily rendered in some situations, the user agent may replace it by a sequence of 3 FULL STOP characters (U+002E).

See also

Related articles

CSS Attributes

Text