Solution for wrapping words and breaking my grid

Question

I am trying to make a setting similar to the youtubes video grid.

The problem is with the names. I see that youtube shortens the names with "..." and lasts no more than two lines.

I am not sure how to do this, so I work with what I have.

Here is an image of what the video grid looks like with a placeholder and it looks and works fine:

---

Then, when I apply the actual headers to the video grid, they are too long and break the grid.

---

Then I try to use different CSS to try to collapse or break the appart words, such as: word-wrap and white-space . For some reason, none of the available options work. So I'm trying to apply width to it to “squeeze” the words together. This seems to work, but it validates the grid correctly.

Is there any other way that I should do this? Here is a website so you can try playing with it if you want: iCODFilms

Answer 1

You can also set a minimum height so that they all reserve space (space) for two lines or ... the jquery equheights plugin

Answer 2

If you want to use JS for the solution, use jquery masonry. This is the right way to solve this problem. http://masonry.desandro.com/

You will need to fix the width of each of the blocks, and then use the plugin.

@Haso Kerik suggested using the equalheights plugin, but he would leave an unnecessary space below all your blocks.

Answer 3

give the header container a certain width so that your title wraps around it.

for best help, show the html structure for one video container and also provide the css that you use. So we can give you a more specific solution.