Limit text to x number of lines and append '...'

Question

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?

Answer 1

Since you're using jQuery try these plugins:

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

Answer 2

We can use css for this:

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