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

删除 float:left; 使用正确的引导路径并拆分 3 列，如 col-md-3 col-md-6 col-md-3 用于标题。

Answer 2

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

.panel-heading {
  height: 40px
}

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