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. User Avatar
    Khalid
    Permalink to comment#

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

    • User Avatar
      Chris Coyier
      Permalink to comment#

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

    • User Avatar
      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? ;)

    • User Avatar
      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!

    • User Avatar
      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 :)

    • User Avatar
      Siraj
      Permalink to comment#

      Please apply js for all browser’s support.

      function shorten(text, maxLength) {
      var ret = text;
      if (ret.length > maxLength) {
      ret = ret.substr(0,maxLength-3) + “…”;
      }
      return ret;
      }

  2. User Avatar
    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!

    • User Avatar
      stryju
      Permalink to comment#

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

  3. User Avatar
    Thomas
    Permalink to comment#

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

  4. User Avatar
    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

    • User Avatar
      Rebecca

      Still wonder if anyone has found a solution on that… At least I didn’t without any HTML markup manipulation

  5. User Avatar
    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. User Avatar
    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. User Avatar
    Erik

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

  8. User Avatar
    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. User Avatar
    luky
    Permalink to comment#

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

  10. User Avatar
    Ash Skutches
    Permalink to comment#

    Worked great, thanks! Nice comment box btw!

  11. User Avatar
    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:”…”;
    }

    • User Avatar
      Irfan
      Permalink to comment#

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

    • User Avatar
      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. User Avatar
    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. User Avatar
    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. User Avatar
    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

    • User Avatar
      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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Ross
    Permalink to comment#

    This is great for truncating single line text.

    For multi-line text I use Dotdotdot.

  20. User Avatar
    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. User Avatar
    simranjit

    I want to ellipsis after 2 lines is it possible

  22. User Avatar
    Ying Zhang
    Permalink to comment#

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

  23. User Avatar
    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;
    }
    
  24. User Avatar
    David
    Permalink to comment#

    Is there a way to look into an element and if that element did indeed truncate the string therein return something? Because when it doesn’t need to be truncated it still has the CSS but when it does truncate it can’t really figure out what to look for in… thoughts?

  25. User Avatar
    Prome
    Permalink to comment#

    Worked perfectly in JQuery dialog title.

  26. User Avatar
    Brian Lee

    I had to slightly modify this to work in my scenario. I had to use display: inline-block to constrain width of my elements and vertical-align: middle to correct some vertical alignment issues that display: inline-block caused. For anyone that might find use for it:

    .truncate-link {
        max-width: 100%;
        display: inline-block;
        vertical-align: middle;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
  27. User Avatar
    Hasan
    Permalink to comment#

    Is there any way in css to implement ellipsis in the middle of the text like “HiIamHasan…thereanySolution”.

  28. User Avatar
    Prumps Manjula
    Permalink to comment#

    The thing about any CSS solution is that you have to inject CSS into your web app, My dynamic site doesn’t have any CSS, and I’m reluctant to inject HMTL into it aswell. I found by taking a string and dividing by 2 makes the string shorter so should fit anybodys purpose.

  29. User Avatar
    unthinkingly
    Permalink to comment#

    You can have ellipsis truncation without an explicit width — but you need to have an extra overflow: hidden on a containing element.

    See: http://codepen.io/unthinkingly/pen/XMwJLG

    • User Avatar
      clevergadget
      Permalink to comment#

      thanks for the update unthinkingly you really helped me out. I’m glad I waited until this week to look for the solution.

  30. User Avatar
    Stew West

    This option seems to work relatively well, even on wrapped text, but not 100% compatible, yet.

  31. User Avatar
    Marek
    Permalink to comment#

    Please remember that ellipsis will not show up if the container has display: flex.

    • User Avatar
      unthinkingly
      Permalink to comment#

      Thanks Marek, good point, the truncated element can not be display: flex. (Should be display: block.)

      Also if the truncated element is nested inside a flex item, the flex-item needs to have overflow: hidden.

      I updated a demo with more details about how to use this with flex. The issues are not intuitive, but once you get it working the ellipsis is really useful with flex!

      http://codepen.io/unthinkingly/pen/XMwJLG

Submit a Comment

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.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag