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

The following code display an image and title:

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

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

Which looks like the following:

如下所示:

The title of the video in the first thumbnail overflows onto the next line. This causes the size of the thumbnail to increase, which throws off the grid style I was going for.

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

Can somebody point me in the right direction for a better approach / CSS solution?

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

1 个解决方案

#1

This css:

.thumbnail p {
font-size: 12px;
line-height: 14px;
height: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

will prevent text (sized at 12px, with a line-height of 14px) from overflowing onto a second line.

将防止文本(大小为12px,行高为14px)溢出到第二行。

In the styles above, if you adjust the font-size: and line-height: and height: to suit, your .thumbnail p should then always display as a single line. Whenever the line is too long for the space available, the line will be truncated with ... added immediately after the truncation.

在上面的样式中,如果你调整font-size:和line-height:和height:以适应,你的.thumbnail p应该总是显示为一行。每当该行对于可用空间而言太长时,该行将被截断,并在截断后立即添加....