在角度 5 的三行之后显示省略号答案

【问题标题】：displaying ellipsis after three lines in angular 5在角度 5 的三行之后显示省略号
【发布时间】：2018-11-17 10:37:56
【问题描述】：

我在我的网络应用程序中显示回复消息，如下图所示，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 中无法正常工作

【问题讨论】：

Limit text length to n lines using CSS的可能重复
这很有趣。 4 多年前，我和一位同事（应产品管理的要求）花了一周的大部分时间来解决这个问题。我们最终编写了一个自定义 Javascript 解决方案，对文本进行标记（以免中断中间词）并插入省略号字符。很高兴看到从那以后情况有多大改善。 :-P
也许这有帮助：stackoverflow.com/a/53753528/5155810

标签： css angular html styles ellipsis

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

试试这个：

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

对我有用

【讨论】：

【解决方案3】：

使用这个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

【讨论】：