无论内容如何,​​如何制作固定大小的div

时间:2015-01-21 23:33:30

标签: css angularjs twitter-bootstrap twitter-bootstrap-3

以下代码显示图像和标题:

  <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>

如下所示:

screen shot of code result

第一个缩略图中的视频标题溢出到下一行。这会导致缩略图的大小增加,这会抛弃我想要的网格样式。

有人能指出我正确的方法来获得更好的方法/ CSS解决方案吗?

1 个答案:

答案 0 :(得分:2)

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应始终显示为一行。每当该行太长而且空间不足时,该行将被截断,并在截断后立即添加...