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 CSS line-clamp property as well as this 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 for truncating to a particular number of lines? You might also dig this neat fading truncation effect.
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.
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? ;)
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!
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 :)
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;
}
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!
well, the link u provided makes it work in Fx as well :-)
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
A little more heavy? It’s a resource monster.
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!
Is it possible to make CSS ellipses work with multi-lines? Or does that require JavaScript?
-webkit-line-clamp(an unsupported WebKit property) let you do that:http://dropshado.ws/post/1015351370/webkit-line-clamp
Opera has something really cool:
text-overflow: -o-ellipsis-lastline;I have implemented this and it works quite well.
http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
Is there any line-clamp property available for latest firefox?
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
Still wonder if anyone has found a solution on that… At least I didn’t without any HTML markup manipulation
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!
CSS3
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
This is supported in Firefox with Gecko 7.0+
https://developer.mozilla.org/en/CSS/text-overflow :)
Hey – would anyone know how to do this with a full word?
I’ve seen
text-overflow:ellipsis-wordused 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.
@Thierry Koblentz : Thanks a ton! I was looking for multi-line ellipsing using only CSS.
Worked great, thanks! Nice comment box btw!
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:”…”;
}
Brilliant solution – Thanks for contributing fellow, and thanks to Chris for initiating the thread.
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.
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;
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..
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
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
}
You can do this with multiline also , for example : sass mode
I forgot overflow: hidden;
This doesn’t work.
Selector :after places ‘…’ after hidden text (this is also hidden)
yeah, doesn’t work here…
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. :(.
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!
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
This is great for truncating single line text.
For multi-line text I use Dotdotdot.
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?
I want to ellipsis after 2 lines is it possible
Any luck finding how to do that in 2018 using vanilla css? :D
Line-clamp + ellipsis class
Still in search for a css only way to truncate multiple lines … no luck so far…
Hmm this might be a winner http://codepen.io/martinwolf/pen/qlFdp
Made a sass mixin for it http://codepen.io/dodozhang21/pen/mHvrn
Great examples but they don’t work in IE or FF. Does anyone have a multiple line example that works in all browsers?
Ying, this worked amazingly and it was exactly what I was looking for! Thanks!
Tks nhe :))
please add a line!
display:inline-block;Depending on your situation
display:blockwould also work.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?
Worked perfectly in JQuery dialog title.
I had to slightly modify this to work in my scenario. I had to use
display: inline-blockto constrain width of my elements andvertical-align: middleto correct some vertical alignment issues thatdisplay: inline-blockcaused. For anyone that might find use for it:Is there any way in css to implement ellipsis in the middle of the text like “HiIamHasan…thereanySolution”.
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.
You can have ellipsis truncation without an explicit width — but you need to have an extra
overflow: hiddenon a containing element.See: http://codepen.io/unthinkingly/pen/XMwJLG
thanks for the update unthinkingly you really helped me out. I’m glad I waited until this week to look for the solution.
This option seems to work relatively well, even on wrapped text, but not 100% compatible, yet.
Please remember that ellipsis will not show up if the container has display: flex.
Thanks Marek, good point, the truncated element can not be
display: flex. (Should bedisplay: 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
Ellipsis also don’t show in Firefox when element has display: inline-block.
What about adding
width: 100%on the child? That seems to work too. May be a little less enigmatic for future code readers.Is it possible to add space between text and ellipses?
Not that I am aware of, but that’s a really interesting idea. The
line-clampproperty is currently in a working draft and, while it won’t do this either, it might be worth adding your use case to the spec discussion.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: