如何检查td内文本的行长并在单击时显示更多内容

Question

I am trying to show "see more" which when clicked will show the full content inside a td . The condition for see more is that it will appear when the text inside td has more than 3 lines, then show "see more" and onclick expand and show full content.

Here, width is set to 318px and user may or may not change.

I can give line-height to td to be 21px , and based on calculations I can calculate number of lines but in array the text are random and array size is increasing with scroll. The array size may be in 1000s or much more. So I don't want to maintain array size which have 1000 or more elements which contain status for each text (array elements) about number of lines.

Is there, any better way where a simple trick can be applied to all text (array elements).

here is stackblitz link:- https://stackblitz.com/edit/angular7-test-mndgc5?file=app%2Fapp.component.html

.ts

// textss is dyanamic and can be 100 or with a scroll

textsss = [
"In 2005, Nature published a peer review comparing 42 science articles from Encyclopædia Britannica and Wikipedia and found that Wikipedia's level of accuracy approached that of Britannica. Time magazine stated that the open-door policy of allowing anyone to edit had made Wikipedia the biggest and possibly the best encyclopedia in the world, and was a testament to the vision of Jimmy Wales.",
 "005, Nature published a peer review comparing 42 science articles from Encyclopædia Britannica and Wikipedia and found that Wikipedia's level of accuracy approached that of Britannica.",
"abcdffff",
"ished a peer review comparing 42 science articles from Encyclopædia Britannica and Wiki",
.
.
.
.
]

 ngAfterViewInit(){
  this.viewHeight = this.elementView.nativeElement.offsetHeight;
     console.log( this.viewHeight);
    this.lines = Math.round(this.viewHeight/ 21);
     console.log(this.lines);
     if(this.lines > 3){
       this.dynamicTextHeight = 3 * 21;
     }
  }

  expand(){
     this.dynamicTextHeight = this.lines * 21;
  }

.html

<table class="table">
<tbody >
<tr *ngFor="let text of textsss;let i = index;" [style.height.px]="dynamicTextHeight">
<td #mainScreen>{{i + 1}}. <span *ngIf="lines > 3" (click)="expand()">... see more</span>{{text}}</td>
</tr>
</tbody>
</table>

Answer 1

Update:

Since CSS was not enough, I've refactored to handle each box as a component and made the height calculation at the beginning (AfterViewInit) and use it to display or not the extra lines.

Demo: https://stackblitz.com/edit/angular7-test-x7pqvp

---

You can achieve that with CSS + toggling the ngStyle:

1. text-overflow + fixed height (calculated from font-size , line-height and number of lines to show). And SASS may help with that calculation.
2. Display see more/less by switching the ngStyle definition.