Bootstrap面板文本截断和重叠

Question

我正在处理Web应用程序，我想知道是否有任何方法可以使引导面板中的文本截断，而不是增加面板的高度。

使用此：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 
} 

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