Css 如何使固定大小的div与内容无关

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

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

{{video.videoData.data.title}

如下所示：

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

有人能为我指出一个更好的方法/CSS解决方案的正确方向吗？

这

CSS

：

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

将防止文本（大小为

12px

，行高为

14px

）溢出到第二行

---

在上述样式中，如果您调整

字体大小：

和

行高：

和

高度：

以适应，则您的

缩略图p

应始终显示为一行。当行太长而无法容纳可用空间时，该行将被截断，并在截断后立即添加

。

。

您可以发布多个缩略图的代码吗？