CSS省略號在Bootstrap 3縮略圖標題中不起作用

Question

我無法弄清楚如何在Bootstrap 3縮略圖標題內使css：ellipsis工作。它在正文中完美無缺地工作，但到目前爲止還沒有運氣。我正在使用Chrome的最新版本。

jsfiddle link

HTML

<div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer"> 
    <div class="thumbnail"> 
    <img src="http://animalia-life.com/data_images/bird/bird1.jpg" alt="image"> 
    <div class="caption"> 
     <div class="thumbnailheader"><h3>This text is too long to fit inside its container.</h3></div> 
     <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id.</p> 
     <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p> 
    </div> 
    </div> 
</div> 

CSS

.thumbnailheader, 
.thumbnail p 
{ 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

任何想法？

Answer 1

您需要直接在元素themselve上定義CSS（本例中爲<h3>）。 如果設置此父元素，父不會「觸發」的<h3>

.thumbnailheader h3, .thumbnail p 
{ 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

省略號的overflow:hidden這裏的更新小提琴： http://jsfiddle.net/mA6Za/124/