创建特定尺寸的标签云

Question

问候，

我想创建一个盒子，其宽度和高度矢志不移内的HTML标签云。

我想内，以适应最有效的文本 - 所以，如果文字是简单的一个词，这个词将是大，并填补了盒子的全宽（并尽可能多其高度的越好）。如果有四个单词，它们将占据比例较小的空间，但仍然尽可能地填满框。

连字是没有必要的;但是，有必要将更长的字符串分成不同的行。例如，如果有多个单词，那么使用几条大小均匀的线条而不是较长的单行（字体较小）会更有效。

这是棘手，因为我不知道字符串的像素尺寸为HTML显示它们。任何人都可以帮助我进行计算吗？ （来自HTML/CSS的已知值是：框宽x，框高y，字体大小f，字体行高l，字体字母间距s和字体系列m）。

我可以测量单个字体的字母，但这样做效率很低。根据上面的变量，是否有更简单的方法来测量单词的x和y高度？

额外的好处：我想用身体元素的整个区域，以显示该标签云。如果可能的话，我希望这些词在体内垂直和水平居中对齐。如果我能弄清楚如何构建云，我可以编写代码。

谢谢！

我要补充：我知道这个简单的解决方法可能是使用像信使等宽字体。但是，对于挑战（并最终为美学），我想使用格鲁吉亚。

Answer 1

你可以把你的云放在iframe没有滚动条，边框，固定线高度和固定高度:-)。例如，有5行标签的空间，所以第6行不可见。

不好的一点是你可以隐藏你最后几个标签。当然，您可以将标签从大到小排序，而不是确保最重要的标签始终可见。

Answer 2

没有“简单”的方法来做到这一点。但是，如果你愿意抛出一些脚本，那么有几个解决方案。

如果将每个标记包装在<span>，frex中，您可以在javascript中测量<span>的宽度，找出字体大小与宽度的比率，然后调整字体大小以使宽度为你要。

作为在页定心，文本对齐：中心将水平中心内联元素（如文本或图像）。块元素可以居中，如果他们有一定的宽度（你不必知道宽度，他们只是有一个，像一个显示：块<img>一样）通过设置左，右页边距既“汽车”。

垂直居中是比较困难的，只能通过两种方式来完成，现在：

1. 如果你知道元素的高度，你可以做“的立场：绝对的;顶部：50％;利润率“ - （高度的一半）;”，用相应的数字和单位代替（高度的一半）。不要忘记负号！
2. 如果你不知道高度，你可以利用表格单元的能力来垂直对齐事物。将它包装在一个表中，并将其设置为vertical-align：middle，或者甚至更好（如果您可以忽略IE7及更早版本），请将容器设置为display：table-cell，然后使用vertical-align：middle。

Answer 3

你有searched为Flashbasedtag clouds？

Answer 4

我喜欢这个问题，我有类似的问题。我成功通过

display: inline-block; 
float: none; 

inline-block解决它可能不被旧版本浏览器的支持。