Решение для переноса слов и ломания моей сетки

Question

Я пытаюсь выполнить настройку, аналогичную сетке видео youtubes.

Проблема связана с названиями. Я вижу, что YouTube сокращает заголовки с помощью «...» и длиной не более двух строк.

Я не уверен, как это сделать, поэтому я работаю с тем, что у меня есть.

Вот изображение того, как выглядит сетка видео с заголовком заполнителя, и она выглядит и работает нормально:

---

Затем, когда я применяю фактические заголовки к сетке видео, они слишком длинные и нарушают сетку.

---

Затем я пытаюсь использовать другой CSS, чтобы попытаться свернуть или сломать слова appart, такие как: word-wrap и white-space. По какой-то причине ни один из доступных параметров не работает. Поэтому я пытаюсь применить к нему width, чтобы «сжать» слова вместе. Это вроде работает, но разрушает сетку по вертикали.

Есть ли другой способ, которым я должен пойти по этому поводу? Вот веб-сайт, поэтому вы можете попробовать поиграть с ним, если хотите: iCODFilms

Answer 1

, если вы готовы использовать JS для решения, тогда используйте jquery masonry.Это правильный способ решить эту проблему.http://masonry.desandro.com/

Вам нужно будет зафиксировать ширину каждого из блоков и затем использовать плагин.

@ Хасо Керич предложил использовать плагин equalheights, но это оставило бы ненужный пробел ниже всехтвои блоки.

Answer 2

назначьте контейнеру заголовка определенную ширину, чтобы заголовок обернулся вокруг него.

для лучшей справки, покажите структуру html для отдельного контейнера видео, а также укажите используемый вами css. Таким образом, мы можем дать вам более конкретное решение

Answer 3

Вы также можете установить минимальную высоту, чтобы все они резервировали пространство (пробел) для 2 строк или ... Плагин jQuery equalheights