CSS Ellipsis

Recently I've needed to utilize the text-overflow property and wanted to share some details about using it properly. First off, you should take a quick look at the spec: http://www.w3schools.com/cssref/css3_pr_text-overflow.asp. We'll focus on the ellipsis value.

Demo text-overflow: ellipsis

Given an element with a specific height, and overflow: hidden, you can add text-overflow: ellipsis. BUT, it won't work properly without also adding white-space: nowrap. This is because you need to define your text to not automatically break to flow within the bounds of your element, in our case a div:

div {
    height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}​

Browser Support

It's really good: http://www.caniuse.com/#search=text-overflow. It's basically supported in all major browsers, including IE6.

Usage Notes

This really only works on a single line of text. In other words, if you want to show 2 (or more) lines of text and then overflow on line 2, it won't work that way. I have yet to find a good solution to this without using JavaScript.