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

我知道这个问题很旧，但是仍然没有答案，这是我在Google上获得的第一个结果...

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

Answer 2

使用此library。该库的问题在于您将必须为父元素指定宽度（以像素为单位）。例如

<!-- the outer container MUST have a width! -->
<div style="width:250px;">
    <!-- we want two lines max. -->
    <div [clamp]="2">
        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. 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.
    </div>
</div>

@Wrong建议的图书馆看起来更好。它可以处理响应并占用高度。 here

Answer 3

尝试：

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

对我有用