css - 在 Angular 5 的三行后显示省略号

Question

我在我的网络应用程序中显示回复消息，如下所示，CSS 样式如下图所示。

这是上面的CSS样式

 .replyMessage {
      width: 100%;
       padding-left: 0px;
       max-width: 500px;
       min-width: 100px;
       word-break: break-all;
       max-height: 85px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 }

但我需要在三行之后显示省略号，如下所示

非常感谢任何帮助。

版本:Angular 5

下面的样式帮助我解决了 chrome 中的问题

.replyMessage {
     width: 100%;
     padding-left: 0px;
     max-width: 500px;
     min-width: 100px;
     word-break: break-word;
     max-height: 85px;
     overflow: hidden;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     text-overflow: ellipsis;
     line-height: 21px;
     display: -webkit-box;
 }

但这在 firefox 中不能正常工作

Answer 1

我知道这个问题很老但仍然没有答案，这是我在谷歌上得到的第一个结果......

我使用这个很棒的库来完成这项工作 https://github.com/lentschi/ngx-ellipsis