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.