Bootstrap面板文本截止和重叠

Question

我正在开发一个网络应用程序，我想知道是否有任何方法可以使自举面板中的文本切断，而不是增加面板的高度。

使用此：https://jsfiddle.net/ayfaozbt/

然后拖动面板使其更短，以便向上/向下推动文本。 我试图用标题替换该效果（在示例中，它是Panel-Primary-Overflow）被切断。因此，标题的末尾将不可见，但面板的高度将被保留。

感谢任何帮助，谢谢。

代码：

<div id="item{num}-panel" class="panel panel-primary">
  <div class="panel-heading" role="tab" id="item{num}-header" onclick="$('#item{num}-body').collapse('toggle');">
    <h4 class="panel-title" style="text-align: center">
      <div style="float:left">#52</div>
      <a data-toggle="collapse" data-parent="#accordion" href="#item{num}-body" style="margin: 0 auto;">
        Panel-Primary-Overflow.pdf
      </a>
      <div style="float:right">386.5K</div>
    </h4>
  </div>
  <div id="item{num}-body" class="panel-collapse collapse" role="tabpanel">

Answer 1

如果要固定面板标题的高度，则应在CSS文件中设置高度。例如：

.panel-heading {
  height: 40px
}

从那开始，看看它是否朝着正确的方向迈出了一步。

Answer 2

删除 float：left; 使用正确的bootstrap路径并拆分3列 标题 col-md-3 col-md-6 col-md-3 。