Как можно обрезать текст заголовка без сдвига элемента?

Question

[Сергей Нижний Новгород]

Добрый день.

Сейчас делаю адаптивный дизайн на Foundation, появилась проблема.

Проблема:

Под видео расположен заголовок, который может содержать n-число символов. Чтобы сайт выглядел хорошо, мне нужно, чтобы блоки заголовков не прыгали при ресайзе:

В итоге, я повесил на блок вот такие стили:

.video_title{
    background-color: #2f6151;
    color: #ffffff;
    padding: 0 0.2rem 0 0.2rem;
    font-size: 1em;
    min-height: 3rem;
    max-height: 3rem;
    overflow: hidden;    
}

В итоге получается ситуация, что блоки ведут себя правильно, текст хорошо обрезается. Но невидимый текст фактически продолжается вниз и смещает нижний блок.

Answer 1

[Максим]

я в fundation не работал - всё делаю без этих framrwork но если font указать в vw то проблема решится

пример на Fiddle

Answer 2

[ommunist]

JS в помощь. Truncate.

jsfiddle.net/AxyXr/243

А чисто CSS на CSS_Tricks есть такой метод

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}