Truncated text

The text below in green boxes should be magically truncated so that it only occupies one line of text; the remaining text should be chopped off. Resize the window to see it dynamically add and remove words from the text to maintain this state of affairs.

To apply the technique, simply set class="truncated" on an element and include the JavaScript library. Note that the current implementation assumes that the div (or whatever element) you're truncating text in contains only text and not any other elements! Don't try truncating a div containing HTML; it (currently) will break.

If you are prepared to explicitly set the height of a line of your text, then you can do this with pure CSS: see the pure CSS version.

Update: fix applied 2006-11-29 for lines which start off shorter than the line length (and so don't need truncation). Thanks to Taimar for pointing out the bug!

A short text section with text truncation turned on. A short text section with text truncation turned on. A short text section with text truncation turned on. A short text section with text truncation turned on. A short text section with text truncation turned on. A short text section with text truncation turned on. A short text section with text truncation turned on. A short text section with text truncation turned on. A short text section with text truncation turned on. A short text section with text truncation turned on. A short text section with text truncation turned on. A short text section with text truncation turned on.
A short text section without text truncation. A short text section without text truncation. A short text section without text truncation. A short text section without text truncation. A short text section without text truncation. A short text section without text truncation. A short text section without text truncation. A short text section without text truncation. A short text section without text truncation. A short text section without text truncation. A short text section without text truncation. A short text section without text truncation. A short text section without text truncation.
A page-width text section with truncation. A page-width text section with truncation. A page-width text section with truncation. A page-width text section with truncation. A page-width text section with truncation. A page-width text section with truncation. A page-width text section with truncation. A page-width text section with truncation. A page-width text section with truncation. A page-width text section with truncation. A page-width text section with truncation. A page-width text section with truncation. A page-width text section with truncation. A page-width text section with truncation.
A page-width text section with no truncation. A page-width text section with no truncation. A page-width text section with no truncation. A page-width text section with no truncation. A page-width text section with no truncation. A page-width text section with no truncation. A page-width text section with no truncation. A page-width text section with no truncation. A page-width text section with no truncation. A page-width text section with no truncation. A page-width text section with no truncation.