Angular 显示和隐藏部分文本

我有来自API的长文本，我希望显示其中的一部分（可能有两行），并允许用户扩展区域，以便阅读全文，而不是第一眼看到全文就返回全文

样品 这就是我努力实现的目标

代码 这是我在视图中的文本部分代码

<ion-card-content [innerHTML]="listing.body"></ion-card-content></ion-col>

---

有什么想法吗？

声明一个布尔值：

show:boolean=false；

声明用于切换值的方法：

displayText（）{
this.show=！this.show
}

单击“显示更多”按钮时，可以切换文本容器的高度。使“显示更多”按钮与文本容器重叠，这样可以实现所需的效果

模板：

{{listing.body}

{{show？'Read Less'：'Read More'}

CSS:

.hideText{
身高：20%；
溢出：隐藏；
}
.showText{
身高：100%；
溢出：未设置；
}
.showReadMore{
宽度：100%；
位置：绝对位置；
最高：30%；
}
.无显示{
宽度：100%；
}

组件： 声明变量

public show:boolean=false；

创建函数

displayText（）{
this.show=！this.show
}

这样它就隐藏了所有内容。如何限制默认显示的文本部分<代码>例如显示150个字符，然后使用这个

displayText（）

只需使用slice方法即可。例如：let example=“您好，欢迎来到Angular”let result=example.slice（0，10）+“…”谢谢，我会测试这个方法，让您知道它是否有效。我，这个方法（功能上）有效，但通过设计它有问题，请看屏幕截图，因为我们没有使用

innerHTML

它显示所有html标记，而且行重叠。