text-overflow

The text-overflow property in CSS deals with situations where text is clipped when it overflows the element's box. It can be clipped (i.e. cut off, hidden), display an ellipsis ('…', Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings).

.ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

Note that text-overflow only occurs when the container's overflow property has the value hidden, scroll or auto and white-space: nowrap;.

Text overflow can only happen on block or inline-block level elements, because the element needs to have a width in order to be overflow-ed. The overflow happens in the direction as determined by the direction property or related attributes.

The following demo displays the behavior of the text-overflow property including all the possible values. Browser support varies!

Check out this Pen!

Setting overflow to scroll or auto will display scrollbars to reveal the additional text, while hidden will not. The hidden text can be selected by selecting the ellipses.

Old Stuff

An old version of the spec says you could use an URL to an image for the ellipsis, but it looks as if that was dropped.

There is a two-value syntax, e.g. text-overflow: ellipsis ellipsis;, that would control the overflow on the left and right sides of the same container. I'm not sure how that would be possible to achieve. Perhaps centered text in a too-small container? The new spec says this, as well as defining a string, is "at risk."

I'm not sure where ellipsis-word came from. It's not in the spec or in any other documentation other than on WebPlatform.org.

The text-overflow property used to be shorthand for the combination of text-overflow-mode and text-overflow-ellipsis, but not anymore and those separate properties don't exist.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
25+ 5.1+ 19+ 12.1+ IE8+ 2.1+ 3.2+

Comments

  1. User Avatar
    Stefano Vollono
    Permalink to comment#

    I found this bug in my blog. I created this jsfiddle: http://jsfiddle.net/GnKFM/

    Looking online I found this official thread. https://code.google.com/p/chromium/issues/detail?id=133700 – Issue 133700: text-overflow:ellipsis does not handle inline-block subelements correctly. Did you know? Do you know a trick to solve it?

    thanks

  2. User Avatar
    Akash
    Permalink to comment#

    I use this code to avoid text-overflow
    .open > .dropdown-menu {
    overflow: auto;
    display: block;
    Text-overflow:ellipsis;
    }

    but still unable to find resule in [xyz…]

    any suggestion

  3. User Avatar
    Sum
    Permalink to comment#

    If you have a long string without any white space, text-overflow then works with white-space: normal; too (with default white space)

  4. User Avatar
    dirkus
    Permalink to comment#

    There is a problem with ie9 rendering when you use a custom glyph as a font-family property plus the ellipsis effect. Not sure what the solution is yet.

  5. User Avatar
    anon
    Permalink to comment#

    no current browser support for author-defined strings
    firefox seems to have support for:

    text-overflow: ‘… more’;

  6. User Avatar
    Sa Xi
    Permalink to comment#

    I’ve a problem about text-overflow , I use this code to display the result ” vwxy… ”
    {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    }
    but the result not like this “vwxy…”

  7. User Avatar
    Majid
    Permalink to comment#

    You should define width for that box, and width should be less than text length.

  8. User Avatar
    Hamza SAĞ
    Permalink to comment#

    you can check this -> Your text to link here…

  9. User Avatar
    ProgramCpp
    Permalink to comment#

    Does the clipping work with scroll bars.

  10. User Avatar
    Ryan
    Permalink to comment#

    Looks like text-overflow: ellipsis is ignored whenever text-align: right is set.

  11. User Avatar
    MandalyThu

    text-overflow doesn’t work in default browser in Lenovo Tablet S5000. I already use
    text-overflow: ellipsis;
    white-space:nowrap;
    overflow:hidden;
    All Browser is OK with above code.
    But it doesn’t work in lenovo Tablet .How to fix it?

  12. User Avatar
    M Faraz Ahmed Sa
    Permalink to comment#

    html css example – hide content with div using inline CSS

    Always and Forever * A fresh approach to shopping. *

    Best way to hide in html/css using display:none;

    Example!!

    hi..

    .hideClass
    {display:none;}

    • User Avatar
      M Faraz Ahmed Sa
      Permalink to comment#

      use also this code to hid content through inline css

      (((<div style = " display :none " align=" center ">  <a href =" http :// www 0 tijaarat.pk"> Always and Forever * A fresh approach to shopping. * </a> </div> )))
      
    • User Avatar
      bruch
      Permalink to comment#

      I don’t think you understand the point of the article.

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag