Movatterモバイル変換

[0]ホーム
URL:

Skip to main content
CSS-Tricks
Search
Snippets →CSS →Truncate String with Ellipsis

Truncate String with Ellipsis

Chris Coyier on

Things have changed quite a bit since this article was published in 2011! If you’re looking for a more modern approach to truncating a string of content, check out the CSSline-clamp property as well asthis tutorial that uses it along with a fading effect.

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;}

Note the fixed width in use here. The gist is that the element needs some kind of determinate width, which you have to be particularly careful about with flexbox:

Looking fortruncating to a particular number of lines? You might also digthis neat fading truncation effect.

Psst! Create a DigitalOcean account and get$200 in free credit for cloud-based hosting and services.

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

      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 :)

    • 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. 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. Ahrengot
    Permalink to comment#

    One of the Vimeo developers created a JavaScript file to do this as well. It works in all browsers i believe, and it works in blocks of text as well as single lines.

    It might be a little more heavy on the CPU if you have a lot of little text blocks, but it has worked just fine for me the couple of times i’ve used it.

    http://reusablebits.com/post/2642059628/introducing-clamp-js

    • mystrdat
      Permalink to comment#

      A little more heavy? It’s a resource monster.

    • Michael
      Permalink to comment#

      241 lines of code to truncate a simple string? I’m sure it’s wonderful and serves many other purposes outside of my own situation…but still…241 lines. Good God!

  4. Thomas
    Permalink to comment#

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

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

    • Rebecca

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

  6. 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!

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

  8. Erik

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

  9. Ben
    Permalink to comment#

    Hey – would anyone know how to do this with a full word?
    I’ve seentext-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.

  10. luky
    Permalink to comment#

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

  11. Ash Skutches
    Permalink to comment#

    Worked great, thanks! Nice comment box btw!

  12. 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 actuallydoes fit, you’re left with a useless ellipsis. If youknow 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.

  13. 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;

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

  15. 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
      }

  16. Apopii Dumitru

    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: " ...";   }}
  17. Prachi

    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. :(.

  18. Michael Johnston

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

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

  20. Ross
    Permalink to comment#

    This is great for truncating single line text.

    For multi-line text I useDotdotdot.

  21. 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?

  22. simranjit

    I want to ellipsis after 2 lines is it possible

  23. Ying Zhang
    Permalink to comment#

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

  24. David Strutz

    please add a line!display:inline-block;

    .truncate {  display:inline-block;  width: 250px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}
  25. 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?

  26. Prome
    Permalink to comment#

    Worked perfectly in JQuery dialog title.

  27. Brian Lee

    I had to slightly modify this to work in my scenario. I had to usedisplay: inline-block to constrain width of my elements andvertical-align: middle to correct some vertical alignment issues thatdisplay: 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;}
  28. Hasan
    Permalink to comment#

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

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

  30. unthinkingly

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

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

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

  31. Stew West

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

  32. Marek

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

    • unthinkingly
      Permalink to comment#

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

      Also if the truncated element is nested inside a flex item, the flex-item needs to haveoverflow: 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

  33. Rick Leijten

    Ellipsis also don’t show in Firefox when element has display: inline-block.

  34. Danny Andrews

    What about addingwidth: 100% on the child? That seems to work too. May be a little less enigmatic for future code readers.

  35. Asha
    Permalink to comment#

    Is it possible to add space between text and ellipses?

    • Geoff Graham
      Permalink to comment#

      Not that I am aware of, but that’s a really interesting idea. Theline-clamp property is currently in a working draft and, while it won’t do this either, it might be worth adding your use case to thespec discussion.

  36. Ayla
    Permalink to comment#

    Is it possible to use ellipsis only on spaces? So not break the word itself, but find the closest space to the max width? Of course I can’t add any breaks or the ellipsis will assume there is no need for the “…”

    Any ideas?

    Current code:

    .textDiv {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}

Leave a ReplyCancel reply

Your email address will not be published.Required fields are marked*

[8]ページ先頭
©2009-2025 Movatter.jp