Question

我创建了一个类似论坛的页面，所有消息如下（简化）：

<div class="message-wrapper" *ngFor="let node of allNodes">
      <div [class]="isExpanded(node.id) ? 'message-content expanded' : 'message-content'">
           <div class="content" [innerHtml]="node.comment"></div>
           <span (click)="toggleExpand(node.id)" class="showMore">{{ isExpanded(node.id) ? 'Show less' : 'Show more' }}</span>
      </div>
</div>

还有CSS

.message-content {
     overflow-y: hidden;

     .content {
        line-height: 1.5vh;
        max-height: 6vh;
        overflow-y: hidden;
     }
 }

.message-content.expanded {
    max-height: 10000000vh;
    overflow: visible !important;

    .content {
         overflow: visible;  
         max-height: 100000000vh;
    }
}

然后点击“显示更多”和“显示更少”范围时，div.content会按预期展开。

我当前遇到的问题是我只想在文本实际溢出时才显示“显示更多”。

我知道我可以通过减去scrollHeight和innerHeight来找出答案，但是要使其正常工作，我需要具有相应{{1 }}在我的控制器中。

所以我的问题：

当nativeElement溢出且页面上的所有消息具有相同的类等时，如何显示“显示更多”范围？

这个问题与现有问题不同的原因是我没有单个元素，但是我有多个相同的元素（多条消息），因此需要唯一的node元素。

Answer 1

创建了一个变通办法，在其中将动态ID添加到所有div和span。然后，我遍历所有节点并检查文本是否溢出。如果是，请将hidden=false设置为标签。

for(let comment of this.allComments) {
   //element which contains the comment content
   let content = document.getElementById('div'+comment.id);

   // if the element height is bigger than the displayed height (with an error margin of 10)
   if(content.scrollHeight - content.clientHeight > 10) {
       // the corresponding 'show more' label
       let label = document.getElementById('label'+comment.id);
       label.hidden = false;
   }
}

动态显示“显示更多”

1 个答案: