css - 自动换行和打破我的网格的解决方案

Question

我正在尝试进行类似于 youtube 视频网格的设置。

问题来自标题。我看到 youtube 用“...”缩短了标题，不再那么长两行。

我不确定如何执行此操作，所以我正在使用可用的工具。

这是带有占位符标题的视频网格的图像，它看起来和工作正常:

---

然后，当我将实际标题应用到视频网格时，它们太长而破坏了网格。

---

然后我尝试使用不同的 CSS 来折叠或打断单词 appart，例如:word-wrap 和 white-space。由于某种原因，所有可用参数均无效。所以我尝试对其应用 width ，以努力将单词“挤压”在一起。这有点管用，但它确实破坏了网格。

还有其他方法可以解决这个问题吗？这是网站，因此您可以根据需要尝试使用它:iCODFilms

Answer 1

如果您愿意使用 JS 来解决问题，那么请使用 jquery masonry。这是解决这个问题的正确方法。 http://masonry.desandro.com/

您需要固定每个 block 的宽度，然后使用插件。

@Haso Keric 建议使用 equalheights 插件，但它会在所有 block 下方留下不必要的间隙。