Code Snippet
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