HTML/CSS-自动填充的可折叠元素

我有一堆文本div，它们是使用

ngRepeat

生成的；它们太大了

取而代之的是，我希望在他们的位置上有可折叠的。但是，我希望看到按钮上方文本中的2-3个句子，其余的可以折叠

<div>TEXT I WANT VISIBLE</div>

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">TEXT I WANT COLLAPSED</div>

我想要可见的文本
可折叠
我要的文本已折叠

---

最好的方法是什么？关键的是，我不想手动选择哪个文本进入可折叠文件，哪个不进入-我正在寻找一种方法来自动创建这对元素

这与其说是特定于AngularJS的任务，不如说是CSS任务。我们的想法是在通过

ng repeat

生成的每个div上设置一个类，并使用

overflow

和

height

CSS属性切换其他一些类，这些类将独立显示/隐藏该div

例如，在视图中：

<div ng-repeat="item in items">
  <p class="container" ng-class="{'show': item.visible}">{{item.text}}</p>
  <button ng-click="item.visible = !item.visible">Show more</button>
</div>

以及相关的样式：

.container {
  height: 32px;
  overflow: hidden;
}
.show {
   overflow: visible;
   height: auto;
}

---

这里有一个例子：plunker:

是的，这非常有效，谢谢！还有一个问题：除了固定的

px

编号之外，设置

容器高度值的好方法是什么？我能让它依赖于什么吗？你能举例说明它依赖于什么吗？如果它是真正动态的，您可以使用
ng样式
，或者如果它可能需要几个不同的固定值，您可以定义一些单独的CSS类并使用
ng类
。
.container {
  height: 32px;
  overflow: hidden;
}
.show {
   overflow: visible;
   height: auto;
}