CSS/Less: Truncate Text with CSS (ellipsis)

A cross-browser example of truncating a single line of text using only CSS.

Cross-Browser Support: IE 6+, Safari 4+, Firefox 7+, Opera 11+ and Chrome 10+:

.truncate {
   text-overflow: ellipsis;
   display: inline-block;
   vertical-align: top;
   white-space: nowrap;
   overflow: hidden;
   width: 150px;
}

If you use a CSS pre-processor like Less, a mixin like this could be quite handy:

.truncate-line(@width: 100%) {
   text-overflow: ellipsis;
   display: inline-block;
   vertical-align: top;
   white-space: nowrap;
   overflow: hidden;
   width: @width;
}

Enjoy! :)