Question

I have a div which contains text. The text should be shortened to two lines and “…” added at the end to point that there’s more.
Since the font and font size may vary according to different users’ settings (for example: browser “text size” settings, different browsers, etc.), I need to do this dynamically on the client side.

What is the best strategy to do this?
Thanks.

Answer 1

There are a few CSS features that Microsoft pioneered and has had available to developers in Internet Explorer for a long time now. One of those features is the text-overflow property, which is now in CSS3 and has implementations in Safari, and Opera. However, firefox still does not support this feature.

For a cross browser JavaScript implementation of the ellipsis feature for the jQuery framework, you may be interested in checking out the following article:

• Ajaxian – Text-Overflow for Firefox via jQuery

---

UPDATE:

Since jQuery is not an option, you may want to check the following:

• Javascript Tutorial – How to Auto Ellipse Text
• JavaScript Ellipsis or Cross-Browser “truncate with dots”
• Ajaxian – Ellipsis or “truncate with dots” via JavaScript