在引導面板標題中使用帶div和span的省略號

Question

如何將按鈕放在與文本相同的行中「Nulla vitae quam a velit dictum tincidunt。Maecenas ...」？

我用這

style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" 

所以線在面板尺寸結束。沒有它，如果文本不夠大，按鈕和文本保持在同一行。

http://jsfiddle.net/Khrys/4PHAE/

<div class="col-md-4"> 
    <div class="panel panel-default"> 
     <div class="panel-heading" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> 
      <span>Nulla vitae quam a velit dictum tincidunt. Maecenas sed dapibus nunc.</span> 
      <div class="btn-toolbar pull-right"> 
       <div class="btn-group"> 
        <a href="#" class="btn btn-default btn-xs">?</a> 
        <a href="#" class="btn btn-default btn-xs">!</a> 
       </div> 
      </div> 
     </div> 
     <div class="panel-body text-center"> 
      <p class="lead" style="margin-bottom: 0px;">Description</p> 
     </div> 
     <div class="panel-footer" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><small>Iten #1, Iten #2, Iten #3, Iten #4, Iten #5, Iten #6, Iten #7, </small></div> 
    </div> 
</div> 

Answer 1

你可以把.panel-heading外的按鈕，因爲它是強制overflow:hidden然後給出float或display:inline-block屬性，以固定寬度的按鈕和文本的div元素。

HTML

<div class="panel panel-default"> 
    <div class="panel-heading" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> 
     <span>Nulla vitae quam a velit dictum tincidunt. Maecenas sed dapibus nunc.</span> 
    </div> 
    <div class="btn-toolbar pull-right"> 
     <div class="btn-group"> 
      <a href="#" class="btn btn-default btn-xs">?</a> 
      <a href="#" class="btn btn-default btn-xs">!</a> 
     </div> 
    </div> 
</div> 

CSS

.panel { 
    position:relative; 
    width:200px; 
} 
.panel-heading { 
    max-width:150px; 
    float:left; 
} 
.btn-toolbar { 
    width:50px; 
    float:right; 
} 

評論此演示http://jsfiddle.net/6ZpBL/2/