I am looking for a Javascript/jQuery + CSS way to limit a text (for example a product name) to say, 2 lines. But the visitors need to know that it is truncated and therefore I will need to append '...' at the end.

The original way I thought of doing this was to put the text in 1 line, measure the width of it and cut it off just before the text reaches 2 times the width of the containing div, but it seems tricky as each character probably needs to be caculated for its width rather than that.

Limiting it to number of characters or words will not work in this case - I would like to fully fill the 2 lines of that div every time, instead of having gaps.

Is there a nice way to achieve this instead of using a monospaced font?

I am looking for a Javascript/jQuery + CSS way to limit a text (for example a product name) to say, 2 lines. But the visitors need to know that it is truncated and therefore I will need to append '...' at the end.

The original way I thought of doing this was to put the text in 1 line, measure the width of it and cut it off just before the text reaches 2 times the width of the containing div, but it seems tricky as each character probably needs to be caculated for its width rather than that.

Limiting it to number of characters or words will not work in this case - I would like to fully fill the 2 lines of that div every time, instead of having gaps.

Is there a nice way to achieve this instead of using a monospaced font?

• javascript
• jquery
• css
• fonts
• typography

• 1 If you're using jQuery just grab this plugin: dotdotdot.frebsite.nl – elclanrs Commented May 6, 2013 at 23:41
• @elclanrs thanks! please submit as answer – Francis Kim Commented May 6, 2013 at 23:43
• OK, I added another plugin that I've used before with success. – elclanrs Commented May 6, 2013 at 23:45
• 2 The english term for 'dot dot dot' is ellipsis. – Marko Commented May 6, 2013 at 23:48
• @Marko thanks, that will e in handy one day – Francis Kim Commented May 6, 2013 at 23:50

2 Answers 2

Since you're using jQuery try these plugins:

• http://dotdotdot.frebsite.nl/
• https://pvdspek.github./jquery.autoellipsis/
• https://github./theproductguy/ThreeDots
• https://github./jjenzz/jquery.ellipsis

We can use css for this:

.truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block; /* for links */
}