创建特定维度的标签云
您好，
我想在一个宽度和高度绝对确定的盒子内创建一个 HTML 标签云。
我希望其中的文本能够最有效地适应 - 因此，如果文本只是一个单词，则该单词会很大并填充框的整个宽度（以及尽可能多的高度）。如果有四个单词，它们占用的空间会按比例减少，但仍尽可能填满盒子。
连字符不是必需的；但是，有必要将较长的字符串分成单独的行。例如，如果有很多单词，那么使用几条大小均匀的行而不是一条长的单行（字体较小）会更有效。
这很棘手，因为我不知道 HTML 显示字符串时的像素尺寸。有人可以帮我计算吗？ （来自 HTML/CSS 的已知值是：框宽度 x、框高度 y、字体大小 f、字体行高 l、字体字母间距 s 和字体系列 m）。
我可以测量单个字体的字母，但这确实效率很低。根据上述变量，是否有更简单的方法来测量单词的 x 和 y 高度？
额外的好处：我想使用 body 元素的整个区域来显示此标签云。如果可能的话，我希望单词在正文中垂直和水平居中对齐。如果我能弄清楚如何构建云，我就可以编写此代码。
谢谢！
我应该补充一点：我知道简单的解决办法可能是使用像 Courier 这样的等宽字体。但是，为了应对挑战（最终是为了美观），我想使用乔治亚州。
Greetings,
I'd like to create an HTML tag cloud inside a box whose width and height are absolutely determined.
I want the text within to fit most efficiently--so if the text is simply one word, the word would be large and fill the box's full width (and as much of its height as possible). If there were four words, they would take up proportionally less space, but still fill the box as much as possible.
Hyphenation isn't necessary; however, it will be necessary to break longer strings into separate lines. If there are many words, for instance, it'd be more efficient to have several evenly-sized lines instead of a long single line (with a small font size).
This is tricky because I don't know the pixel dimensions of strings as HTML displays them. Can anybody help me with my calculations? (The known values, from the HTML/CSS, are: box width x, box height y, font size f, font line-height l, and font letter-spacing s, and font-family m).
I could measure the letters of individual fonts, but that would be really inefficient. Is there an easier way to measure the x and y height of a word, based on the variables above?
Added bonus: I want to display this tag cloud using the full area of the body element. If possible, I want the words to be center-aligned vertically and horizontally within the body. I can code this if I can figure out how to construct the cloud.
Thanks!
I should add: I know the easy fix is probably to use a monospace font like Courier. But, for the challenge (and ultimately for aesthetics), I want to use Georgia.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
没有“简单”的方法可以做到这一点。不过，如果您愿意编写一些脚本，还是有一些解决方案的。
如果将每个标签包裹在
中，frex，则可以在javascript中测量的宽度，计算出font-size的比例宽度，然后调整字体大小，使宽度达到您想要的宽度。至于在页面中居中， text-align:center 将水平居中内联元素（如文本或图像）。块元素可以居中，如果它们具有明确的宽度（您不必知道宽度，它们只需要有一个宽度，例如 display:block![]()
< /code> 通过将左右边距都设置为“自动”来实现）。
垂直居中比较困难，目前只能通过两种方式完成：
There's no 'easy' way to do this. There are a few solutions, though, if you're willing to throw some script at it.
If you wrap each tag in a
<span>, frex, you can measure the width of the<span>in javascript, figure out the ratio of font-size to width, and then adjust the font-size so that the width is where you want.As for centering in a page, text-align:center will horizontally center inline elements (like text or images). Block elements can be centered, if they have a definite width (you don't have to know the width, they just have to have one, like a display:block
<img>does) by setting the left and right margins both to "auto".Vertical centering is more difficult, and can only be done in two ways right now:
您可以将云放在没有滚动条、边框、固定行高和固定高度的 iframe 中:-)。例如，有 5 行标签的空间，因此第 6 行将不可见。
坏事是你的最后几个标签可能会被隐藏。当然，您可以将标签从大到小进行排序，这样您就可以确保最重要的标签始终可见。
You can put your cloud in iframe with no scrollbars, borders, fixed line height and fixed height :-). For example, there are room for 5 lines of tags, so the 6th line will not be visible.
The bad thing is that your few last tags could be hidden. Of course You can sort tags from bigger to lower, than you'll make sure that most important tags will be always visible.
您是否搜索过Flash 基于 标签云？
Have you searched for Flash based tag clouds?
我喜欢这个问题，我也遇到过类似的问题。我通过使用
inline-block成功解决了这个问题，旧版浏览器可能不支持。
I like the question, I had a similar problem. I succeed to solve it by using
inline-blockmay not be supported by older browsers.