Javascript 角度js显示类似gmail的重叠电子邮件线程

我正在尝试构建类似这样的东西（类似于gmail电子邮件线程）：

您有多条消息，所有消息最初都是折叠的，用户只能看到最后一条消息，以及最后一条和第二条消息的某些部分。当用户单击折叠部分的中心部分时，所有消息都会展开

是否有一个angular自定义指令提供类似的东西，或者我可以使用的开源的东西来提供扩展/折叠选项。我试图避免从头开始写这篇文章

我看过引导手风琴，但它会扩展/折叠整个消息线程

感谢您的指导/帮助

---

谢谢

您可以使用两种方法：使用css来减少行大小，或者使用角度过滤器来限制最大字符数

我编写了一个jsbin代码来显示这两个方面：

使用样式：

li { overflow: hidden; height: 20px; }

使用过滤器：

<ul ng-repeat="item in list">
    <li>{{ item | limitTo: 50 }}</li>
</ul>

{{项目|限制：50}

使用一些CSS，您还可以实现所需的结果：

<div class="inbox">
    <div class="message">
      Message 1
     </div>
     <div class="message">
      Message 2
     </div>
     <div class="message">
      Message 3
     </div>
     <div class="message">
      Message 4
     </div> <div class="message">
      Message 5
     </div> <div class="message">
      Message 6
     </div> <div class="message">
      Message 7 - last message
     </div>

</div>

---

您可以使用overflow:hidden on。文本的消息不会与下一个文本重叠hanks:）更新的答案。

<div class="inbox">
    <div class="message">
      Message 1
     </div>
     <div class="message">
      Message 2
     </div>
     <div class="message">
      Message 3
     </div>
     <div class="message">
      Message 4
     </div> <div class="message">
      Message 5
     </div> <div class="message">
      Message 6
     </div> <div class="message">
      Message 7 - last message
     </div>

</div>

.message {
    height: 10px;
    border: 1px solid red;
    overflow: hidden;
}

.message:first-child {
    height: 100px;   
}

.message:last-child {
    height: auto;    
}
}