Как сделать фиксированный DIV размера независимо от содержания

Question

Следующей отображении коды изображения и название:

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

Answer 1

Это 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 должен затем всегда отображаться в виде одной строки. Всякий раз, когда линия слишком длинна для доступного пространства, линия будет усечена с ..., добавленным сразу после усечения.