Techniques how to use ellipsis in table columns

The CSS3 text-oveflow property allows to have content not exceed a certain limit. Browsers can be asked to place ellipsis, the … “character”, after the last visible character rather than just cutting content off. It’s a nice visual indication for readers that there’s actually more content than what is shown. Later you’ll learn techniques how to use ellipsis in fixed-width or max-width table columns using HTML and CSS.

Before text-overflow supported ellipsis in most browsers (i.e. before maybe 2011) your only option was to use complicated font-metrics calculations on the server, cut-off the content after a certain number of characters, and append … manually. The results were obviously dissatisfying because one could never get this quite right across all browsers. Besides, since you don’t have control over the font-sizes in browsers it always remained a poor approach.

General remarks

The CSS instruction text-overflow: ellipsis can be used in various places but it always has to be applied to the HTML container that hosts your content. The container is for example a <div> or a paragraph – or a table cell. Also, it should be accompanied by the overflow: hidden CSS instruction. This is an indication to the browser that under no circumstances you want “excessive” content to be displayed.

Ellipsis in table columns

Consider the following requirements

  • you have tabular content in two columns
  • both columns combined must use at most N pixels
  • the right column has a fixed with of n pixels
  • the left column should use as few pixels as possible (at most N – n obviously)
  • and if the content in the left column exceeds the available space it should be cut off using ellipsis

The code

Based on discussion on Stackoverflow here are three techniques:

  • use an HTML table
  • use div with display: inline-block
  • use floating div in div

Results in different browsers

Safari on OS X

Ellipsis in table columns - result on OS X Safari

Firefox on OS X

Ellipsis in table columns - result on OS X Firefox

Firefox on Windows 7

Ellipsis in table columns - result on Windows 7 Firefox

IE 9 on Windows 7

Ellipsis in table columns - result on Windows 7 IE9

IE9 in quirks mode in Window 7

Ellipsis in table columns - result on Windows 7 IE9 quirks mode

Conclusion

Contact me if you have an idea how to make this work for IE9 in quirks mode ;-). For all other browsers I favor the second approach over the third. I only use CSS float if there’s no other option because with every float you need a clear, too.

Leave a Reply

Your email address will not be published. Required fields are marked *