Html 如何在此区域中仅显示2行动态文本，以3个点结尾，然后显示'；阅读更多'；链接到它旁边

我尝试过赋予css（省略号）属性。但它是修剪第一行本身。我需要显示两行（如果我可以设置最大长度字符也可以）。我在angular中使用了“limit”属性来修剪文本，但在这个InnerHTML内容中并没有这样做。 请参阅我的HTML：

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

这是目前UI中的结果。

---

我想这样行。

看看：这能回答你的问题吗？非常感谢……这个解决了我的问题。谢谢@JithinAjifeels很好的帮助：）@RazanaRazak

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