以下代码显示图像和标题:
<div id="eventsCollapse" class="panel-collapse collapse" ng-controller="videoController">
<div class="panel-body">
<div class="row-fluid">
<div class="col-sm-6 col-md-4" ng-repeat="video in eventVideoDetails | filter:{category:'events'} | orderBy:'videoData.data.title'">
<div class="thumbnail">
<img ng-src="{{video.videoData.data.thumbnail.hqDefault}}"/>
<p>{{video.videoData.data.title}}</p>
</div>
</div>
</div>
</div>
</div>
如下所示:
第一个缩略图中的视频标题溢出到下一行。这会导致缩略图的大小增加,从而偏离了我想要的网格样式。
有人可以为我指明正确的方向,以获得更好的方法/CSS 解决方案吗?
最佳答案
这个css
:
.thumbnail p {
font-size: 12px;
line-height: 14px;
height: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
将防止文本(大小为 12px
,行高为 14px
)溢出到第二行。
在上面的样式中,如果您调整 font-size:
和 line-height:
和 height:
来适应,您的 .thumbnail p
应始终显示为单行。每当该行对于可用空间而言太长时,该行将被截断,并在截断后立即添加 ...
。
关于css - 如何制作固定大小的div而不考虑内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28078872/