Firefox truncation script
The script on this page performs text truncation in Firefox without resorting
to XUL. I create a <canvas> tag, and set its font to the style of the
font being used in the element. I then use the measureText() method to determine
how wide the text will be, and truncate accordingly. I'm currently doing a
simple iteration to subtract characters from the innerHTML until it fits, but
intend to come up with a slightly faster method for achieving the same result.
Fixed Width Examples
This text is wider than its container!
Fluid Width Examples (try resizing your window)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut at mi. Integer diam metus, vulputate a, ullamcorper vitae, auctor commodo, ligula. Fusce dignissim. Donec quis nunc. Mauris ut est nec arcu pharetra pulvinar. Nulla orci erat, placerat quis, laoreet ac, rhoncus eget, libero. Aenean et nibh. Quisque dolor urna, luctus in, pretium in, vulputate fringilla, lectus. Aenean erat. In dapibus. Praesent lectus massa, luctus at, interdum id, sollicitudin viverra, mauris. Curabitur iaculis ornare libero.
Sed euismod. Nam ligula pede, elementum non, consequat et, egestas vel, elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis iaculis, quam ac scelerisque aliquet, turpis purus iaculis risus, accumsan tristique sapien ligula vitae enim. Integer id nulla. Duis vel erat. Nullam fermentum ligula. Vestibulum et elit. Sed fermentum cursus leo. Duis pretium.
Phasellus sit amet pede. Aliquam erat volutpat.
With Padding
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut at mi. Integer diam metus, vulputate a, ullamcorper vitae, auctor commodo, ligula. Fusce dignissim. Donec quis nunc. Mauris ut est nec arcu pharetra pulvinar. Nulla orci erat, placerat quis, laoreet ac, rhoncus eget, libero. Aenean et nibh. Quisque dolor urna, luctus in, pretium in, vulputate fringilla, lectus. Aenean erat. In dapibus. Praesent lectus massa, luctus at, interdum id, sollicitudin viverra, mauris. Curabitur iaculis ornare libero.
Sed euismod. Nam ligula pede, elementum non, consequat et, egestas vel, elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis iaculis, quam ac scelerisque aliquet, turpis purus iaculis risus, accumsan tristique sapien ligula vitae enim. Integer id nulla. Duis vel erat. Nullam fermentum ligula. Vestibulum et elit. Sed fermentum cursus leo. Duis pretium.
Phasellus sit amet pede. Aliquam erat volutpat.