Introduction

This post is inspired by the news that text overflow ellipsis capabilities have reached the mozilla code base trunk (see bug). This should be in Firefox 7, which thanks to the new 6 week release cycles, won't be long.

So, what is text overflow and why do I care? Since I started web application development 5 years ago, there has always been the need for a grid or table of some sort. In every case the end user wanted to see fixed width columns, fixed height rows and have data that overflows the cell content. However, it isn't particularly user friendly to have...

The text here is "Lots of data, data, data" but if it is cut off just before the first comma, the user can't see that there is more in the cell contents than they expect. With text overflow, we get this instead..

If you are an IE7 user (more on that later) or Firefox user, the rest of us are seeing...

IE7 Workaround

This nice functionality does not work on IE7, because in IE7 (and IE6) text overflow does not work on table cells. the HTML for the above looks like this..

<table style="table-layout: fixed; width: 60px;border: black 1px solid;">
  <tr>
    <td style="width: 60px; overflow: hidden; white-space:nowrap;text-overflow: ellipsis;border: black 1px solid;">
      Lots of data, data, data
    </td>
  </tr>
</table>

but to get it to work in IE7 we need to introduce a div that has the overflow set on it.

<table style="table-layout: fixed; width: 60px;border: black 1px solid;">
  <tr>
    <td style="width: 60px; border: black 1px solid;">
      <div style="width:100%;overflow: hidden;text-overflow: ellipsis;white-space:nowrap;height:1em; ">
         Lots of data, data, data
      </div>
    </td>
  </tr>
</table>

Background Colours

I was recently setting some background colours on text that was being clipped with an ellipsis added and found that although the text was removed, the background remains. E.g.

No ellipsis...

Ellipsis...

One issue with this is that the text color is not inherited from the character that is obscured, so you can see the last dot is kept black and thus obscured. So, maybe that was a contrived example, but what If I am trying to highlight a word and that word is just out of view, then

it looks wrong. The explanation from the spec is that text overflow will..."Hide characters and atomic inline-level elements at the end edge of the line as necessary to fit the ellipsis."

and an atomic element is one which is not inline - so basically just inline-block elements that appear after the text that is being truncated.

But because text-overflow works on inline text and not elements, even if we wrap every character in an individual inline block span, we just remove the effect, not the background colour.

Conclusion

Regardless however with my qualms over the exact implementation, this is a great CSS feature now available across all the major browsers. Hurray!

More information is available on the Mozilla information page.