css - 创建特定维度的标签云

Question

问候，

我想在一个框内创建一个 HTML 标签云，它的宽度和高度是绝对确定的。

我希望其中的文本能够最有效地适应——所以如果文本只是一个词，那么这个词就会很大并填满框的整个宽度(并尽可能多地填满框的高度)。如果有四个词，它们会按比例占用更少的空间，但仍会尽可能多地填满方框。

连字符不是必需的；但是，有必要将较长的字符串分成单独的行。例如，如果有很多单词，使用几行大小均匀的行而不是一行很长的单行(小字体)会更有效。

这很棘手，因为我不知道 HTML 显示字符串时字符串的像素尺寸。谁能帮我计算一下？ (来自 HTML/CSS 的已知值是:框宽 x、框高 y、字体大小 f、字体行高 l、字体字母间距 s 和字体系列 m)。

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

额外的好处:我想使用 body 元素的整个区域来显示这个标签云。如果可能的话，我希望文字在正文中垂直和水平居中对齐。如果我能弄清楚如何构建云，我就可以编写代码。

谢谢!

我应该补充:我知道简单的解决方法可能是使用像 Courier 这样的等宽字体。但是，为了挑战(最终为了美观)，我想使用 Georgia。

Answer 1

没有“简单”的方法可以做到这一点。不过，如果您愿意编写一些脚本，则有一些解决方案。

如果将每个标签包装在 <span> 中，frex，你可以测量<span>的宽度在 javascript 中，计算出 font-size 与 width 的比例，然后调整 font-size，使宽度在你想要的位置。

至于在页面中居中，text-align:center 将使内联元素(如文本或图像)水平居中。通过设置左边距和右边距都设置为“自动”。

垂直居中比较困难，目前只能通过两种方式实现:

1. 如果你知道元素的高度，你可以做“position:absolute; top:50%; margin-top: -(half the height);”，你用适当的数字和单位代替(half高度)。不要忘记负号!
2. 如果您不知道高度，可以利用表格单元格的功能来垂直对齐内容。要么将其包装在表格中并将其设置为 vertical-align:middle，或者更好(如果您可以忽略 IE7 和更早版本)，将容器设置为 display:table-cell 然后使用 vertical-align:middle。