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/