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.

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

  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!

  3. 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. 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. 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. This is supported in Firefox with Gecko 7.0+
    https://developer.mozilla.org/en/CSS/text-overflow :)

  8. 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. 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.

  12. 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. 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. 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. 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. 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. Still in search for a css only way to truncate multiple lines … no luck so far…

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".