How can i display just 2 lines of my dynamic text in this area ending with 3 dots and then the 'read more' link next to it

Question

i have tried giving css(ellipsis) property. but it is trimming the first line itself.i need to show two lines (if i can set up max length character also is fine). I have gone through the 'limit' property in angular to trim text but it is not happening inside this InnerHTML content. please see my HTML:

<div>
  <p class='ellipsis' [innerHTML]="news.newsText"></p>
  <a href="javascript: void(0)" (click)="readmoreFunc(news)">Read more</a>
</div>

This is the result in UI by now.

Does this answer your question? [How to truncate text in HTML](https://stackoverflow.com/questions/16150120/how-to-truncate-text-in-html) — Shounak Das, Nov 17 '20 at 06:26

score 0 · Answer 1 · answered Nov 17 '20 at 06:41

0

.ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

I think this will work.

answered Nov 17 '20 at 06:41

JithinAji

402
5
16

Thanks a lot....this one solved my issue.THANKYOU @JithinAji – Razana Razak Nov 17 '20 at 09:26
feels good to help :))) @RazanaRazak – JithinAji Nov 17 '20 at 09:51

How can i display just 2 lines of my dynamic text in this area ending with 3 dots and then the 'read more' link next to it

1 Answers1