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

An example of text-overflow
An example of text-overflow

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.

text-overflow seems to be buggy with overflow:auto
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.