如何始终使用Bootstrap在动态折叠中显示前两行？

在使用Bootstrap的动态折叠时，有时候我们需要显示前两行并截取后面的内容，以节省页面空间。本文将介绍如何使用Bootstrap实现这一需求。

方法一：使用CSS截取文本

我们可以使用CSS中的text-overflow和ellipsis属性来实现文本截取，并结合height和overflow属性来控制显示高度和滚动条。具体代码如下：

<div class="panel panel-default">
  <div class="panel-heading" role="tab" id="headingOne">
    <h4 class="panel-title">
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Panel Title
      </a>
    </h4>
  </div>
  <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
    <div class="panel-body">
      <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget laoreet nulla. Ut velit est, eleifend nec massa at, vehicula euismod nibh. Curabitur tellus nibh, sagittis eget bibendum at, venenatis eget lectus. Donec venenatis sollicitudin volutpat. Donec dictum nisl in risus facilisis, eu fringilla mauris gravida. Quisque eget lacus rhoncus, venenatis magna eu, maximus augue. Vivamus id mi auctor, rutrum arcu eget, pulvinar nunc.</p>
      <p>Second line here</p>
      <p>Third line here</p>
    </div>
  </div>
</div>

<style>
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 40px;
}
</style>

在上面的代码中，我们使用了.truncate的类来截取第一行文本并显示省略号。同时，我们将高度设置为40px，以便显示两行文本。如果需要增加显示行数，只需相应地增加高度即可。

方法二：使用JavaScript截取文本

我们也可以使用JavaScript来对文本进行截取。具体代码如下：

<div class="panel panel-default">
  <div class="panel-heading" role="tab" id="headingTwo">
    <h4 class="panel-title">
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Panel Title
      </a>
    </h4>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
    <div class="panel-body">
      <p id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget laoreet nulla. Ut velit est, eleifend nec massa at, vehicula euismod nibh. Curabitur tellus nibh, sagittis eget bibendum at, venenatis eget lectus. Donec venenatis sollicitudin volutpat. Donec dictum nisl in risus facilisis, eu fringilla mauris gravida. Quisque eget lacus rhoncus, venenatis magna eu, maximus augue. Vivamus id mi auctor, rutrum arcu eget, pulvinar nunc.</p>
    </div>
  </div>
</div>

<script>
var content = document.getElementById("content");
var text = content.innerText;
var maxLength = 100;
if (text.length > maxLength) {
  text = text.substr(0, maxLength) + "...";
}
content.innerText = text;
</script>

在上面的代码中，我们通过JavaScript获取了显示文本的元素，并对文本进行截取和重新赋值。如果需要增加显示行数，只需相应地调整maxLength的长度即可。

总结

以上就是在动态折叠中显示前两行的实现方式，可以根据需求选择合适的方法。