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.

CSS to English

Today I had a brilliant idea! But of course, as Mark Twain said:

There is no such thing as a new idea.

And dang it, he's right again.

My idea was to translate CSS selectors, which are sometimes super complex, into English. In other words, take something like this:

p:not(#foo) > input[type=radio]:checked + label:before

And translate it to something like this:

Selects any content placed before a label element that immediately follows an input element with a type attribute that equals radio and that is a checked radio button or checkbox that is a child of a p element without an id attribute that equals foo.

It would be pretty awesome to build a tool that would do this for me...oh wait, there already is one!

Thank you to whomever is responsible over at The Opal Group; now I can move on to the next (probably already existing) big idea.