Hidden browser gems – Part I: text-overflow
Browser, CSS, Hidden Browser Gems July 29th, 2007I just started another series for my blog. :-)
Today's browsers are quite huge applications charged with so many features and potentials, that you can hardly know all of them. From time to time I will write about less known, but useful and valuably features: the hidden gems.
While playing with the soft hyphen feature of the latest version of Firefox I remembered that I had seen a nice way to cut off text if it is too long for its containing element. A few years ago I accidentally found an entry in a wiki about a special CSS property which can be used to improve the look of texts inside an element with an overflow:hidden style property.
In Internet Explorer 6.0 (and above) and in Safari 1.3 (and above) you can use text-overflow:ellipsis together with overflow:hidden to get this three dots if text is to long.
Be careful with overflow:auto! It seems a bit buggy in Safari, while it works nearly perfect in Internet Explorer.
Update:
The Opera browser (since version 9.0) supports this property, too. You have to use the proprietary attribute -o-text-overflow and your text will be displayed the same way as in Safari.
I guess once CSS3 goes final, all vendors will use the W3C standard property.
July 30th, 2007 at 10:58
Hi Jonny,
that’s a really great feature :-) … Do you know whether text-overflow:ellipsis is W3C compatible, or is it something proprietary?
Have a nice day,
Golo
July 30th, 2007 at 21:02
Hello Golo!
This property is part of the CSS3 standard, which is (at this moment) a working draft and not yet final.
According to the draft it should be possible to replace the three dots by a custom string or image, but Microsoft has only implemented the overflow modes clip, ellipsis and ellipsis-word.
Kind regards
Jonathan
April 28th, 2012 at 23:14
Along with almost everything that appears to be developing inside this subject matter, all your points of view are rather radical. On the other hand, I beg your pardon, but I can not give credence to your entire idea, all be it exciting none the less. It looks to everyone that your remarks are not completely justified and in reality you are your self not even totally confident of the assertion. In any event I did enjoy looking at it.