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;
}
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? ;)
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;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
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:”…”;
}
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