See the test page.
The CSS ellipsis is great and now pretty well supported; however, there are times one can’t use it. It doesn’t work in table cells of variable width, and won’t work if you want your text to wrap to a second or third line and then truncate. I came up with a technique which will work in those situations. I call it the “fade-container”. It works especially well when you want the table rows to be a uniform height and you want to truncate text that is too long to fit without calculating anything. This technique also works with IE6.
First, a quick explanation of the challenges-
The CSS ellipsis can only be one line (not wrapped to multiple lines) because it needs “white-space: nowrap;”.
The CSS ellipsis is measured by the browser as the width of the available space. You can do this test, create a fixed width container. Inside put 2 spans with text in them. The first give a short bit of text that fits easily inside the container. The second span give a long rambling novel that will need truncation. Style both of them with the ellipsis rules.
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
If you test the width of these with JavaScript you will see that the browser considers them both the width of their container, even the one that’s shorter.
A table calculates the width of columns by calculating the the contents first, and then calculating the columns second. Putting long non-breaking content into a table, which is what happens when one sets the content to nowrap, usually looks bad and often breaks the table.
There are good reasons why you wouldn’t want to use JavaScript to calculate the contents of each cell. The fade-container method means you don’t have to calculate anything. The markup is
div class="fade-container" title="content goes here"
content goes here
div class="fade"
but see the test page for the whole thing.
The way this works is that the text goes inside a div which hides the overflowed text. An image is positioned in the div. The image goes from transparent to opaque, matching the background color of the table cell. If text is long it will flow under the image looking like it’s faded out. If the text is short it will end before the image, which will be invisible, since the colored part matches the background under it.
This can be adjusted to wrap to one or more lines with the CSS. The fade-container has a title with the full content in it in case the user wants to see it by hovering.
The fade div has a gradient which goes from transparent to the container’s background color. This can be done with CSS gradients or with a png for older browsers. If your table row has a different background for hover or selected or has zebra stripes, you will need additional fade styles to match.
The hyphens, word-wrap and word break is to reduce the amount of white-space at the end of the line before the text wraps. If the wrapping word is long, it looks better to hyphenate it instead of showing a gap, which won’t give a visual indicator that there is a fade. For one line I use “word-break: break-all;” because it will show that there’s more text to come, but for multiple lines I won’t use that because it chops a word indiscriminately and that will show on the top lines.
You will need new images and different positioning for non left-to-right languages. You will also need additional colored fades if you have zebra striped tables or the table row backgrounds change color on hover.
