javascript - 按字母数量对单词进行排序，然后整齐地放置单词

Question

我有一个 javascript 中的单词列表与此类似:

var words = ["mine", "minute", "mist", "mixed", "money", "monkey", "month",
             "moon", "morning", "mother", "motion", "mountain", "mouth", "move",
             "much", "muscle", "music", "nail", "name", "narrow", "nation",
             "natural", "near", "necessary", "neck", "need", "needle", "nerve",
             "net", "new", "news", "night"];

单词可以是1-25吗？字母很长。

我有一个 div id="words"，设置宽度为 700px(但我可能会对此进行更改)。

使用css/javascript/jquery，我该如何制作:

• 按字母数量对单词进行排序
• 将单词从左到右放置在 div 标签内，但单词 div 的右边缘没有间隙，并且一行中单词之间的间距均匀。
• 每个单词周围都应该有边框和背景。

像这样:

|reallylongwordssdf     shorterwordfdf     dfsdfsdfsdf     sdfsdfsdf|
|sdfsdfsdf   sdffsdop   sdfjpogs   sdfsds   dfsdsd   dfsdsd   dfsdsd|

我真的不知道从哪里开始。也许我可以编写代码来按字母数量对单词进行排序，但在那之后，我就会陷入困境。

编辑:我忘了添加，这些词必须是链接。

Answer 1

这是一个工作示例:http://jsfiddle.net/6nLUU/4/

总结:

• 使用简单的JS排序来对item进行排序；我添加了一个我编写的小库，以便更轻松地按任意键排序。
• 对容器使用 text-align:justify 以使元素粘在右边缘。
• 在列表末尾包含一个大量的空元素以换行到下一行，以便真正的最后一行是合理的。
• 使用 CSS 作为背景和边框。