創建特定尺寸的標籤雲

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解決它可能不被舊版本瀏覽器的支持。