CSS Ellipsis & HTML Tooltip

What do you do when you have a fixed width column or element in which a piece of text must be jammed into? Well, usually you end up righting a big of code to cut of the text and throw in an ellipsis: i.e. “Large Title …”

This can be tedious to do for something that is so small. There must be an easier way? There is, kind of…

You can use the “text-overflow: ellipsis” property to automatically achieve this effect. However, be warned, this is not cross browser supported… at all. This is purely an extension of IE and a couple of other browsers (like Opera). This unfortunately does not work at all in Firefox. The project I was working on only required that IE7 and IE8 are supported, as such this was a great time saver. My other option was to use a jquery component or write a simple function myself -> which may be your only option if you need support amongst all browsers.

Here are the details in an example:













You must be sure to set the overflow, white-space, and width properties in order for the text-overflow property to work.

The above code produces this:




Perfect!!! Except, I need to also have a little hover over tooltip! That one is even easier, and is support in all major browsers through the “title” property directly on the html element like this:




And boom…you get a standard OS tooltip looking like this:





Very, very trivial ideas, that are perhaps easier than you new or thought about.


  1. Boris says:

    That’s good, but aI need enable or disable the tooltip if necesary. ¿How can I do it?
    text-overflow calculate when is necesary “…” but a need to know how to disablethe tooltip if the text it not overflow.

    best regards

  2. travis says:

    Using this scenario, the div or element will expand to whatever you put as the item “width” property in css. If the text fits in their it will not use an ellipses – automatically. So you should get this for free simply by adjusting the width.