Keep two first text lines, remove everything else

Question

In a <div> I have some text. Because of the div-width the text is shown in multiple lines. E.g. the following code:

<div>text01 text02 text03 text04 text05 text06 text07 text08 text09 text10 text11 text12</div>

might be shown in e.g. four lines:

text01 text02 text03
text04 text05 text06
text07 text08 text09
text10 text11 text12

I wish to keep only the first two lines, and if further lines are present they must be removed and replaced with the text line ... as a new (therefore third) text line.
In other words: I wish to find the second line break (if present) and replace all text after this point with a text line saying ....

So, if I have two lines of text, nothing is changed:

text text text
text text text

But if I have more than two lines like above, I will get this:

text01 text02 text03
text04 text05 text06
...

Any good advice?

Answer 1

You should do that in css and if necessary add javascript.

In css you can set:

.two-line-div {
  max-height: 3em;    /* or whatever adds up to 2 times your line-height */
  overflow: hidden;
}

That will reduce the box to the desired height.

If you always want to show ... (if the content is always more than 2 lines), just add an element with the three dots after your div.

If you want to add another line with ... if the content is bigger than what you are showing, you would need javascript to calculate the original height, see if it is more than 2 lines and add / show an element dynamically if it is.

Note that a css solution does not remove anything, all lines are there, they are just not visible.