Unable to get ellipsis for Multiline Paragraph

Question

I have a block of texts where I want to get Ellipsis for 4/5 lines but if I use

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

in a paragraph tag, I get the ellipsis for only one single line I want my paragraph to look like this

Answer 1

That is super easy to do because of the line-clamp property in CSS. Just use this:

overflow: hidden;
text-overflow: ellipsis;
line-clamp: 5; /* you can keep it any thing*/
white-space: nowrap;

So, what the line-clamp will do is it will let the paragraph go to particular number of lines before it adds the ellipsis. More information here: css-tricks line-clamp

the answer to this problem on the website is this:

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

<p class="line-clamp">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>