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

Question

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

标题出现了问题。我看到youtube用'...'缩短标题，不再是两行。

我不知道该如何做到这一点，所以我正在使用我现有的。

以下是使用占位符标题显示视频网格的图像，并且外观和工作正常：

---

然后，当我将实际标题应用于视频网格时，它们太长并且会打破网格。

---

然后我尝试使用不同的CSS来尝试折叠或破坏appart这样的词语，例如：word-wrap和white-space。由于某些原因，所有可用参数都不起作用。因此，我尝试对其应用width，以便将这些词语“挤压”在一起。这有点可行，但它会打破网格。

我还有另一种方法可以解决这个问题吗？ 这是网站，因此您可以尝试使用它：iCODFilms

Answer 1

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

您需要修复每个块的宽度，然后使用该插件。

@Haso Keric建议使用equalheights插件，但它会在你的所有块之下留下不必要的空隙。

Answer 2

您还可以设置最小高度，使所有这些都保留2行的空间（间隙）或... jQuery equalheights plugin

Answer 3

以标题围绕它的方式为您的标题容器指定一个特定的宽度。

为了获得更好的帮助，请显示单个视频容器的html结构，并提供您正在使用的CSS。这样我们就可以为您提供更具体的解决方案