如何使用css和angular7动态显示文本省略号？

我有一个要在组件中显示的卡片列表。在每张卡片上都有来自服务器的描述，在我的

component.html

中有一个

ngFor

，如下所示

<p class="site-text" ellipsis ellipsis-content="{{row.offer_desc}}"></p>

{{row.companyId.name}
{{row.offer\u desc}

这是我的css

.card-description-area {
    min-height: 102px !important;
    max-height: 102px;
    overflow: hidden;
    margin-bottom: 10px;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
}

.site-text {
    font-size: 16px !important;
    font-family: 'Muli', sans-serif !important;
    line-height: 24px !important;
}

因此，我想在末尾添加文本省略号
…
。我正在隐藏溢出文本，但我还想在卡片中显示的文本末尾添加
…
。因为我有动态的行长，所以我没有使用
css
和
angular7

我怎样才能做到这一点呢？
我自己设法找到了解决办法。解决方案是
ngx省略号
这样动态地放置文本省略号

<p class="site-text" ellipsis ellipsis-content="{{row.offer_desc}}"></p>


您可以使用角管来达到所需的效果

从'@angular/core'导入{Pipe，PipeTransform}；
@烟斗({
名称：“省略号”
})
导出类EllipsisPipe实现了PipeTransform{
公共转换（值：字符串）：字符串{
//选择任何适合你需要的数字
如果（value.length>40）{
返回值.substring（0,40）.concat（“…”）；
}
返回值；
}
}

HTML:

{{row.offer|desc |省略号}
您可以使用一个简单的hack
{{plan？.description}{{slice:0:40}{{plan？.plan_name>40？'…'：''}