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:

capture_4

 

 

 

 

 

 

 

 

 

 

 

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:

capture_1

 

 

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:

capture_3

 

 

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

capture_2

 

 

 

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

2 Comments

  1. Boris says:

    Hello.
    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
    boris

  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.