CSS text-overflow Property

The text-overflow property sets how overflowing text is handled.

Options include clip, ellipsis, and others.

white-space:nowrap and overflow:hidden are required to make it work.

Example

#

A narrow container with text-overflow set to ellipsis.
The ellipsis (...) indicate that some text is hidden.

This content is too wide for the container.

<style>
  .overflow {
    width: 250px;
    border: 2px solid lightblue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<p class="overflow">
  This content is too wide for the container.
</p>

Syntax

text-overflow: clip | ellipsis | string | 
               initial | inherit;

Values

#

Value Description
clip Default. Clip the text and make the rest invisible.
ellipsis Add an ellipsis (...) to the clipped text
string Adds a custom string to represent clipped text. Only supported by Firefox.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different text-overflow values.

This content is too wide for the container and a large portion is not visible.

<style>
  .overflow-example {
    width: 330px;
    padding: 15px;
    border: 2px solid lightblue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }
</style>

<p class="overflow-example">
  This content is too wide for the container
  and a large portion is not visible.
</p>

Browser support

This table shows when text-overflow support started for each browser.

Chrome
4.0 Jan 2010
Firefox
7.0 Sep 2011
IE/Edge
6.0 Aug 2001
Opera
11.0 Dec 2010
Safari
3.1 Mar 2008

You may also like

Guides