CSS 省略号在 Bootstrap 3 个缩略图 header 中不起作用
CSS ellipsis not working within Bootstrap 3 thumbnail header
我不知道如何让 css:ellipsis 在 Bootstrap 3 个缩略图 header 中工作。它在 body 文本中工作完美,但到目前为止在 header 中没有运气。我使用的是 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
将不会 'trigger' <h3>
的省略号
.thumbnailheader h3, .thumbnail p
{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
这是更新后的 fiddle:
http://jsfiddle.net/mA6Za/124/
我不知道如何让 css:ellipsis 在 Bootstrap 3 个缩略图 header 中工作。它在 body 文本中工作完美,但到目前为止在 header 中没有运气。我使用的是 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
将不会 'trigger' <h3>
.thumbnailheader h3, .thumbnail p
{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
这是更新后的 fiddle: http://jsfiddle.net/mA6Za/124/