Angular 2 - 在 html 元素的第四行末尾添加文本

Question

我目前对 Angular 2 有疑问，我正在学习技术，我不是专家。

我正在尝试将文本添加到 Html div 元素的最后一行，我通过[innerHTML] = "object.description"标记向其中添加了 object 的文本。 文本来自 API 请求，当我拿起它时，它有 Html 标签，我必须保留这些标签，以便文本能够很好地显示。

<div class="text" id="descripcion" [innerHTML]=" object.description">
</div>

通过 CSS，我只显示了 4 行，但多余的文本仍保留在 div 标签中，尽管没有显示。

.text {
    height: 104px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; 
    overflow: hidden;
    margin-bottom: 30px;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 27px;
    color: #333333;
}

我需要以某种方式知道它有多少行，并能够在最后添加“...阅读更多”，这将是我可以重定向用户的链接。

我希望在第四行末尾添加“...阅读更多”并作为链接。

我曾尝试使用 Html 和 CSS 将 div 放在首位，但响应式的效果并不好。 我也尝试过使用 typescript 获取元素，但我没有成功。

谢谢你们。

Answer 1

将此 pipe 添加到您的应用程序中：-

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
  name: 'safeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

 constructor(private _sanitizer:DomSanitizer) { }

 transform(v:string):SafeHtml {
   return this._sanitizer.bypassSecurityTrustHtml(v);
 }
}

您需要使用 safehtml pipe 来保持它们的完整性，就像我在下面所做的那样：-

<div class="text" id="descripcion" [innerHTML]=" object.description|safeHtml">
</div>