CSS Reference Property

text-overflow

The text-overflow property determines how to handle inline text that overflows its block container by specifying how overflowed text is signaled to the user.

That is, it allows you to specify what to display at the points where the text overflows the container.

Text can overflow a block container only in its inline progression direction. Text may overflow when it is prevented from wrapping (e.g. due to white-space: nowrap) or a single word is too long to fit. For example:

View this demo on the Codrops Playground

As you can see, the text overflows its container but does not get clipped out or hidden. So, without any additional styles, the text-overflow property has no effect on the element.

In order for text-overflow to work, you need to clip the text that overflows its container. This can be done by setting the overflow property of the element to hidden, or any value other than visible. Using overflow: hidden, the above element becomes:

View this demo on the Codrops Playground

When the overflow is set to be hidden, the text is clipped, and a character may be only partially rendered, as you can see in the above example. This is the default way overflowed text is handled. The default (initial) value of text-overflow is clip.

Now, using text-overflow, you can specify how to signal or tell the user that some text overflows the element. For example, instead of clipping the text at the overflow point, you can tell the browser to add a horizontal ellipsis character (U+2026) to represent the clipped content. In browsers that don’t support the ellipsis character and cannot display it, three dots “…” are displayed instead.

View this demo on the Codrops Playground

The side of the line that the ellipsis is placed depends on the direction of the block. E.g. an overflow hidden right-to-left (direction:rtl) block clips inline content on the left side, thus would place a text-overflow ellipsis on the left to represent that clipped content.

In CSS Level 3, the specification allows you to use a custom string the same way the ellipses (or three points) are used in this example. So, you can use white space (which is considered a string), or any other custom string. See the Examples and Live Demo sections below for examples.

Also in CSS3, the property syntax allows you to specify the overflow at the left and right edges using a two-value syntax. The first value represents the overflow on the left side, and the second value represents the overflow on the right. Note that directionality (see direction) of the text has no effect on the left and right overflow values.

However, the two-keyword syntax and the custom string overflow are both at risk of being dropped, and are currently only supported in Firefox.

Official Syntax

  • Syntax: text-overflow: ( clip | ellipsis | ){1,2} | inherit
  • Initial: clip
  • Applies To: block elements
  • Animatable: no

Notes

The two-keyword syntax and the custom string overflow are both at risk of being dropped, and are currently only supported in Firefox. If they are dropped, this entry will be updated accordingly.

Values

clip
The default value. Clip inline content that overflows. Characters may be only partially rendered.
ellipsis
Render an ellipsis character (U+2026) to represent clipped inline content. User agents may substitute a more language/script-appropriate ellipsis character, or three dots “…” if the ellipsis character is unavailable.

The side of the line that the ellipsis is placed depends on the direction of the block. E.g. an overflow hidden right-to-left (direction:rtl) block clips inline content on the left side, thus would place a text-overflow ellipsis on the left to represent that clipped content.

<string>
Render the given string to represent clipped inline content. The string is displayed inside the content area, shortening more the size of the displayed text. If there is not enough place to display the string itself, it is clipped.

The given string is treated as an independent paragraph for bidi purposes.

Examples

The following sets the text overflow value for a div:

div.example {
    overflow: hidden; /* or scroll or anything other than `visible` */
    max-width: 15em;
    text-overflow: ellipsis;
}
                

The following are all valid text-overflow values:

text-overflow: " ";             /* adds a white space */

text-overflow: "..." "...";     /* two-value syntax. first one specifies the overflow on the left and the second specifies the overflow on the right */

text-overflow: clip;            /* default */

text-overflow: "(...)";         /* adds (...) string */

text-overflow: ">>";            /* adds >> string */
                

Live Demo

In the following demo, different text-overflow values are used. Some of the values and examples only work in Firefox.

View this demo on the Codrops Playground

The following is a screenshot of the first part of the demo, with the different text-overflow values set to a LTR text.

text-overflow-example-1

The following is a screenshot of the second part of the demo, with the different text-overflow values set to a RTL text.

text-overflow-example-2

Browser Support

CSS3 Text-overflow

Append ellipsis when text overflows its containing element

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 4
  • 7
  • 6
  • 11
  • 3.1

Mobile / Tablet

  • 3.2
  • 2.1
  • all
  • 61
  • 56

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Notes

The two-keyword syntax and the custom string overflow are both at risk of being dropped, and are currently only supported in Firefox.

Written by

Last updated December 11, 2016 at 10:51 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.