如何调整div高度以适配动态生成的文本内容？

嘿，我来帮你解决这个产品描述显示的问题！要让前两段文本完整展示，同时div能自动适应高度，点击按钮展开全部内容，可以按下面的步骤来调整：

1. 调整CSS样式，让Div自动适应高度 #

首先，确保你的.div-info没有固定高度限制，这样它会根据内容自动撑开。然后给描述文本添加折叠样式，初始状态只显示前两段：

/* 让容器自动适配内容高度 */
.div-info {
  height: auto;
  /* 可选：设置最小高度避免内容过少时布局太突兀 */
  min-height: 200px;
  padding: 1rem;
}

/* 描述文本基础样式，统一行高方便计算高度 */
.service-description {
  line-height: 1.5;
  overflow: hidden;
  max-height: 4.5rem; /* 2行文本+上下内边距，可根据你的行高调整数值 */
  transition: max-height 0.3s ease; /* 平滑展开/收起的过渡动画 */
  margin-bottom: 1rem;
}

/* 展开后的文本样式 */
.service-description.expanded {
  max-height: 1000px; /* 设一个足够大的值，确保能容纳所有内容 */
}

2. 完善Angular模板和组件逻辑 #

在模板里添加“阅读更多/收起”按钮，并绑定展开状态：

<div class="div-info"> 
  <h1 class="equipment-name">Title</h1> 
  <h4 class="equipment-city-state">{{equipment.coordinates.city}} - {{equipment.coordinates.state}}</h4> 
  <ul class="equipment-price"> 
    <li>Foo</li> 
    <li>Bar</li> 
    <li>Test</li> 
  </ul> 
  <p class="equipment-city-state">{{equipment.coordinates.city}} - {{equipment.coordinates.state}}</p> 
  <!-- 添加#description标记，用于后续动态计算行数 -->
  <p #description 
     class="service-description" 
     [class.expanded]="isExpanded[i]"
     [@visibilityChanged]="visibility[i]">
    {{equipment.description}}
  </p>
  <!-- 只有内容超过2行时才显示按钮 -->
  <button *ngIf="shouldShowButton[i]" (click)="toggleExpand(i)">
    {{isExpanded[i] ? '收起' : '阅读更多'}}
  </button>
</div>

然后在组件类里处理展开状态和动态判断按钮显示逻辑：

import { Component, ViewChildren, QueryList, ElementRef, OnInit, AfterViewInit } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  animations: [
    trigger('visibilityChanged', [
      state('collapsed', style({
        maxHeight: '4.5rem',
        overflow: 'hidden'
      })),
      state('expanded', style({
        maxHeight: '1000px',
        overflow: 'visible'
      })),
      transition('collapsed <=> expanded', animate('300ms ease-in-out'))
    ])
  ]
})
export class YourComponent implements OnInit, AfterViewInit {
  equipment: any[] = []; // 你的设备数据数组
  isExpanded: boolean[] = [];
  visibility: string[] = [];
  shouldShowButton: boolean[] = [];

  @ViewChildren('description') descriptions!: QueryList<ElementRef>;

  ngOnInit() {
    // 初始化状态：默认折叠
    this.equipment.forEach(() => {
      this.isExpanded.push(false);
      this.visibility.push('collapsed');
      this.shouldShowButton.push(false);
    });
  }

  ngAfterViewInit() {
    // 动态计算每个描述的行数，判断是否需要显示按钮
    this.descriptions.forEach((descEl, index) => {
      const element = descEl.nativeElement;
      const lineHeight = parseInt(getComputedStyle(element).lineHeight);
      const totalLines = Math.ceil(element.scrollHeight / lineHeight);
      
      // 如果行数超过2，显示按钮；否则直接展开文本
      if (totalLines > 2) {
        this.shouldShowButton[index] = true;
      } else {
        this.isExpanded[index] = true;
        this.visibility[index] = 'expanded';
      }
    });
  }

  toggleExpand(index: number) {
    this.isExpanded[index] = !this.isExpanded[index];
    this.visibility[index] = this.isExpanded[index] ? 'expanded' : 'collapsed';
  }
}

3. 效果说明 #

• 初始状态下，描述文本只显示前两段，div高度自动适配这部分内容
• 点击“阅读更多”按钮，文本会平滑展开，div会自动增高以容纳全部内容
• 如果描述内容不足2行，按钮会自动隐藏，文本直接完整显示

这样就能完美实现你想要的效果啦！

内容的提问来源于stack exchange，提问作者olegario