CSS省略号在Bootstrap 3缩略图标题中不起作用

Question

我无法弄清楚如何使CSSs:省略号工作在Bootstrap 3缩略图标题内.它在正文中完美无缺,但到目前为止还没有运气.我正在使用最新版本的Chrome.

jsfiddle链接

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

您需要直接在元素上定义CSS(在本例中为<h3>).如果在父元素上设置它,则父元素overflow:hidden将不会"触发"该元素的省略号<h3>

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

这是更新的小提琴:http: //jsfiddle.net/mA6Za/124/