如何压制DIV中的单词

Question

如何以下图所示的方式抑制DIV中的单词（具有已定义的宽度和高度）而不会弄乱顺序？

如果在DIV中没有运气，我应该怎么做才能解决这个问题？

Answer 1

您可以使用column-count这里的小提琴：http://jsfiddle.net/X3XtK/1/

现在看到你的评论。如果您需要将每列限制为最多6个项目且项目数量未知，那么column-count将会非常棘手。我认为你必须在标记中对它们进行分组（将每组6个放在他们自己的div中然后浮动它们）。

Answer 2

你可以用一个小的jQuery脚本来完成它。看到这个小提琴：http://jsfiddle.net/GlauberRocha/ZwY7q/

我已将其作为列表而不是div（但您可以轻松修改此内容）。在我的示例中，项目最初位于无序列表（ul）中。它们被递归地取出6乘6并放入一个新的有序列表（ol）元素，它被浮动。

如果您可以在原始标记中对元素进行分组（如@powerbuoy所示），那很好，但使用JavaScript进行此操作有两个好处：

• 您的HTML标记简单且“语义”，
• 可以动态设置行数（在我的示例中，它作为参数传递给函数）