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 
} 

從那開始，看看它是否朝着正確的方向邁出了一步。