Angular 2 - Add text to the end of the fourth line of an html element

Question

I currently have a problem with Angular 2, I am learning about technology and I am not an expert.

I am trying to add text to the last line of an Html div element to which I add the text of an object through the [innerHTML] = "object.description" tag. The text comes to me from an API request and when I pick it up it has Html tags which I must keep and for the text to show well.

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

By means of CSS, I get only 4 lines to be displayed but the excess text remains in the div tag although it is not shown.

.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;
}

I need to know in some way to be able to identify how many lines it has and to be able to add "... Read more" at the end, which will be a link where I can redirect the user.

I want the "... Read more" to be added at the end of the fourth line and to be a link.

I have tried to do it with Html and CSS putting div on top but the responsive one is not going to do well. I have also tried to get the element using typescript but I have not succeeded.

Thank you all.

Answer 1

Add this pipe to your application:-

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);
 }
}

You need to use safehtml pipe to keep those intact like i have done below:-

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