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

我正在尝试显示更多内容，单击这些内容将显示td中的完整内容。 “查看更多”的条件是，当td中的文本超过3行时，它将出现，然后显示“查看更多”并单击“展开”和“显示全部内容”

这里，宽度设置为318px，用户可以更改，也可以不更改

我可以将td的行高设为21px，根据计算我可以计算行数，但在数组中，文本是随机的，数组大小随滚动而增加。阵列大小可以是1000或更多。所以我不想保持数组的大小，它有1000个或更多的元素，这些元素包含每个文本数组元素关于行数的状态

有没有更好的方法可以将一个简单的技巧应用于所有文本数组元素

以下是stackblitz链接：-

.ts .html 更新：

由于CSS还不够，我已经进行了重构，将每个框作为一个组件处理，并在ViewInit开始时进行了高度计算，并使用它来显示或不显示额外的行

演示：

您可以通过CSS+切换ngStyle来实现这一点：

文本溢出+根据字体大小、行高和要显示的行数计算的固定高度。SASS可能有助于这一计算。 通过切换ngStyle定义显示“查看更多/更少”。

---

感谢chris，当文本很小并且可以包含在<3行中时。高度应根据文本大小自动调整。第二，只有当文本的行数超过3行时，才能看到更多内容。否则，不会。更新了答案@Mahi。希望能有帮助。

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

<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>