How to cut the string in javascript so that it fits exactly two lines & add ... at the end

Question

Hi, I have a requirement where in i have to display the text for two lines & add ... if its overflowing My div Width is fixed.(Even height can be considered as fixed).

Actual text looks like this:

1

Lorem Ipsum is simply
dummy text of the printing
and typesetting industry.

2

Lorem Ipsum is simply text
of the printing and types
industry.

Expected:

1

Lorem Ipsum is simply
dummy text of the print...

2

Lorem Ipsum is simply text
of the printing and typ...

I do not want to overload with plugins(three dots jquery plugin does that).

I'm planning to do just by cutting(split) the string as div width is fixed.

Thanks in Advance.

Answer 1

The CSS text-overflow property is the nicest way, but it's not supported by all browsers yet. If you want to use Javascript, you could create an offscreen element. Use CSS (generated by the script) to give it the same width and font as your target, with a height of '2em' (i.e. 2 lines). Run a loop, adding the text into it one letter at a time, until either you run out of letters or the height changes. When the height increases you know you've exceeded two lines.

Of course you need to account for the width of the "..." as well, so you might append it to the letter you're about to add.

Be sure the element is offscreen rather than using "display: none", as non-displayed elements have no height. "visibility: hidden" might work; I haven't tried.

Answer 2

As the overflow ellipsis css doesn't work for multiline text you have to do it with JavaScript. You could copy the text box, position it absolute with top -1000000px and cut the last letter of the text until the box has the right height. Or you simple cut after a specific letter count this will be faster but not accurate.