Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Truncate String with Ellipsis

All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden.

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

A bunch of more techniques here, including multi-line ellipsis.

Comments

  1. Khalid
    Permalink to comment#

    I like this one, but there is no FireFox support for this one.

    • Chris Coyier
      Permalink to comment#

      The fallback is fine though (in my opinion). It just cuts off.

    • Khalid
      Permalink to comment#

      Yes you’re right, but I don’t like the look of it. I used on a site an extra HTML element to make it look better in FF:
      Give the html element the position property ‘absolute’, position it with ‘right: 0′ and give it a width of 20px. Then use ‘background-image: -moz-linear-gradient (…)’ to make a gradient from transparent (I used rgba with opacity 0) to a solid color (the background-color of the element in which the text is placed). If needed adjust the width and add a value for the z-index property.

      Or you could use a PNG image, but that will be visible on all browsers.

      The first solution is a real CSS trick, isn’t it? ;)

    • Jean
      Permalink to comment#

      A user could benefit from knowing that a number or text is being truncated. I found my solution for FF here.

      Thanks for all the help along the way, Chris!

    • Chris
      Permalink to comment#

      Thankfully support for ellipsis was added to Firefox 7. now that Firefox is in the version 30+ you can bet on this working on most Firefox users machines :)

  2. Maikel
    Permalink to comment#

    This site shows you how to get it working in FF as well.

    http://mattsnider.com/css/css-string-truncation-with-ellipsis/

    It works in IE6.. but not FF.. lame!

    • stryju
      Permalink to comment#

      well, the link u provided makes it work in Fx as well :-)

  3. Thomas
    Permalink to comment#

    Is it possible to make CSS ellipses work with multi-lines? Or does that require JavaScript?

  4. Thamarai
    Permalink to comment#

    Hi,
    I have a statement which should display ellipsis bt should not affect the super script followed by tht ststement..
    for example my statement should look like this “total value…..^1″
    help me how to solve it

  5. BRNater
    Permalink to comment#

    Is this a CSS3 or CSS 2.1 thing? Just curious to know how far behind the curve I am :) PS. Chris you do great work. Thanks for everything!

  6. Gerald Ford
    Permalink to comment#

    This is good but looks like there is still no firefox support. my dreamweaver CS5.5 doesn’t even have a drop down for it

  7. Erik

    This is supported in Firefox with Gecko 7.0+
    https://developer.mozilla.org/en/CSS/text-overflow :)

  8. Ben
    Permalink to comment#

    Hey – would anyone know how to do this with a full word?
    I’ve seen text-overflow:ellipsis-word used a couple times but haven’t been able to find ample documentation to decide whether it’s cross-browser / accepted use or not.

    Suppose a JS implementation to cut off the full word would be fine too.

    Thanks.

  9. luky
    Permalink to comment#

    @Thierry Koblentz : Thanks a ton! I was looking for multi-line ellipsing using only CSS.

  10. Ash Skutches
    Permalink to comment#

    Worked great, thanks! Nice comment box btw!

  11. Miko
    Permalink to comment#

    Seems this works now in Firefox… Could another way to achieve this also be (in addition to the original css):
    .truncate {
    width: 230px;
    }
    .truncate:after{
    content:”…”;
    }

    • Irfan
      Permalink to comment#

      Brilliant solution – Thanks for contributing fellow, and thanks to Chris for initiating the thread.

    • Koen
      Permalink to comment#

      The great thing about this approach is that it works for multi-line blocks as well, and of course is also supported by pre-7 Firefox. I do see the problem that if your text actually does fit, you’re left with a useless ellipsis. If you know your text will be cut off, you might as well use PHP to shorten it and add a […] link.
      I guess in the end it all depends on context.

  12. Lore
    Permalink to comment#

    I had a case where I couldn’t use this (Masonry inside WordPress showing excerpts of posts). This CSS3 worked for me:

    word-wrap: break-word;

  13. Mihail Yakimenko
    Permalink to comment#

    That wery good solution.. but, just for elements which have fixed width. But if i have table-cell with width: auto; and need hide text… i have fail :(

    Take a look..

  14. Chris
    Permalink to comment#

    I have been playing with this in IE9 and if you have two spans next to each other with the first one having the ellipsis then all the following spans are offset somewhat in their position. If somebody has experienced this and/or handled it well please let me know.

    Check it out

    • Parag
      Permalink to comment#

      hi cris, add float:left in your css.
      .ellipsis {
      display: inline-block;
      max-width: 100px;
      ms-text-overflow: ellipsis;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      margin-top: 0px;
      padding-top: 0px;
      float:left
      }

  15. Apopii Dumitru
    Permalink to comment#

    You can do this with multiline also , for example : sass mode

    .truncatedText {
       font-size: 0.875em;
       line-height: 1.2em;
       height: 2.4em; // 2 lines * line-height
       &:after {
          content: " ...";
       }
    }
    
  16. Prachi
    Permalink to comment#

    I’ve read online that ideally the input text field should not have support for this property (“text-overflow:ellipsis”), but it would’ve been nicer if there were support for it anyways. I tried and found that FF and Chrome do support it, but IE and Safari don’t. :(.

  17. Michael Johnston
    Permalink to comment#

    Chris, you ALWAYS have the solution for me. My web app wouldn’t be where it is today without you. Many thanks for all the great posts!

  18. Mahmud
    Permalink to comment#

    Hi Chris, I am big fan of css-tricks. Specially the video sections. This is a new term (text-overflow) for me. Now, i am clear about it.

    Thanks

  19. Ross
    Permalink to comment#

    This is great for truncating single line text.

    For multi-line text I use Dotdotdot.

  20. Jasminum
    Permalink to comment#

    I need to do ellipsis on comma separated values. If I am using “webkit-line-clamp” and “.truncate” class provided in your article, ellipsis is happening but all values are coming in different lines instead of one line.How to ensure that values should come in one line using css?

  21. simranjit

    I want to ellipsis after 2 lines is it possible

  22. Ying Zhang
    Permalink to comment#

    Still in search for a css only way to truncate multiple lines … no luck so far…

  23. David Strutz
    Permalink to comment#

    please add a line! display:inline-block;

    .truncate {
      display:inline-block;
      width: 250px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```