Ellipsis...

It is common to have user interfaces that clip overflowing text and display ellipsis where the text crops. When you move your cursor over the clipped text, you will typically get a tooltip displaying the complete text. Since it is widely accepted that pictures are worth a thousand words, let me share a screenshot (of my Internet Explorer Bookmark pane – pressing Ctrl + I gets you there) to illustrate my point:



You can implement a similar UI in your web-based applications, by using the CSS text-overflow attribute. This is what you need to do:

• Ensure that the text you want to clip is encapsulated in <nobr> </nobr> tags or set the white-space style attribute of the tag containing your text to nowrap


• In the style attribute of your container tag – say div, set the width attribute to your desired width


• In the style attribute of your container tag, set the text-overflow attribute to “ellipsis” and overflow attribute to hidden.
  

Let’s see a quick example of this in action.

Unfortunately, cropping text will not give you tooltips automatically. You can set the title attribute of the div to get the tooltips. Tooltips in web UIs is another interesting topic. I’ll take it up tomorrow!