我不知道如何使Bootstrap 3缩略图标题中的css：ellipsis工作。它在正文中可以正常工作，但到目前为止，标题没有运气。我正在使用最新版本的Chrome。
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;
}
有任何想法吗？
您需要直接在自己的元素上定义CSS（在本例中为<h3>）。如果您在父元素上设置此元素，则父元素的overflow:hidden不会“触发”<h3>
.thumbnailheader h3, .thumbnail p
{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
这是更新的小提琴：http : //jsfiddle.net/mA6Za/124/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句