在角度为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

下面这个stying帮我解决了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

试试这个：

/* autoprefixer: off */
 -webkit-box-orient: vertical;
/* autoprefixer: on */

这个对我有用