javascript - 如何根据动态生成的文本调整div高度展开？

Question

我正在通过服务的 API 调用接收产品说明。这个描述可能会很大，不适合我的 div。这是我的初始 div:

<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>
  <p class="service-description" [@visibilityChanged]="visibility[i]">{{equipment.description}}</p>
</div>

这就是它的样子:

当用户点击“Ler mais”按钮时应该显示文本，如果不适合 div，应该增加 div。这是用户点击按钮时的样子

我想要前两段Lorem将整个显示在 div 中，即使必须增加 div 高度。

Answer 1

只需将此添加到您的 css，这样 divInfo div 就会自动扩展以容纳它的子元素:

.divInfo {
    height: auto;
}

---

带有虚拟文本的 jsFiddle: https://jsfiddle.net/AndrewL64/38rxe82m/

尝试在上面的 fiddle 中复制粘贴随机的长句子或列表，divInfo 将相应地扩展。