在進(jìn)行類(lèi)似微博墻之類(lèi)的展示頁(yè)面中，經(jīng)常會(huì)遇到這樣的需求：在固定大小的區(qū)域放入字?jǐn)?shù)不定的文字，但是要求字體可以自動(dòng)改變大小來(lái)自動(dòng)填充這些區(qū)域。如下所示：

遇到這種情況怎么辦呢？

思考

思考一：面積法

看到需求我的第一個(gè)反應(yīng)是能不能通過(guò)計(jì)算，先獲取整個(gè)區(qū)域的大小，然后再根據(jù)字?jǐn)?shù)，計(jì)算出每個(gè)文字所占的區(qū)域（整體區(qū)域面積/總共字?jǐn)?shù)），再根據(jù)每個(gè)文字所占的區(qū)域設(shè)置字體大小。

理論上這種方案是可以行的，但是實(shí)際執(zhí)行的過(guò)程中，突然發(fā)現(xiàn)，如果給出的字符中有標(biāo)簽比如說(shuō) a 鏈接、img標(biāo)簽等等，那么如何去計(jì)算總共的字?jǐn)?shù)？如果算上這些標(biāo)簽肯定會(huì)導(dǎo)致計(jì)算出的結(jié)果偏小。當(dāng)然這個(gè)問(wèn)題可以通過(guò)過(guò)濾標(biāo)簽，然后計(jì)算出實(shí)際顯示的字?jǐn)?shù)來(lái)解決。

但后續(xù)的問(wèn)題又來(lái)了，當(dāng)我計(jì)算出一個(gè)字體可以使用的面積是30px*30px，那此時(shí)字體應(yīng)該是多大呢？ 30px？ 15px？ 沒(méi)人知道。。。。

這還不算，如果此時(shí)文字中包含數(shù)字英文神馬的，每個(gè)字的寬度都不同怎么辦？如何計(jì)算？

思考二：微調(diào)法

最終因?yàn)閱?wèn)題太多，我們放棄了第一種方案，提出了第二種微調(diào)法，該做法比較巧妙。

首先將文字放到一個(gè)容器中（比如說(shuō)div），從最小的值開(kāi)始（如12px），然后讀取此時(shí)的容器高度，比較有沒(méi)有超出最大的高度。如果沒(méi)有，把字體大小加一（13px），然后再次比較容器的高度和最大高度…… 依此類(lèi)推，直到容器的大小大于最大的高度，此時(shí)，取前一個(gè)值就最佳文字大小。

由于調(diào)整的是最終的顯示大小，所以這種方法可以規(guī)避掉第一張方案的很多問(wèn)題，比如說(shuō)文字中含有標(biāo)簽，中英混排等。

到此，一種可行的解決方案誕生了。但是有人會(huì)問(wèn)，這種頻繁的調(diào)整文字的大小，不停的獲取容器的高度，在性能上或者顯示上是不是會(huì)有問(wèn)題？最初我也有這種懷疑，但是事實(shí)證明，包括IE6在內(nèi)，表現(xiàn)都非常好，用戶肉眼都看不到這個(gè)調(diào)整的過(guò)程。

代碼

最后附上這個(gè)方案的代碼如下