TOC

在進行類似微博牆之類的展示頁面中，經常會遇到這樣的需求：在固定大小的區域放入字數不定的文字，但是要求字體可以自動改變大小來自動填充這些區域。如下所示：

遇到這種情況怎么辦呢？

思考

思考一：面積法

看到需求我的第一個反應是能不能通過計算，先獲取整個區域的大小，然后再根據字數，計算出每個文字所占的區域（整體區域面積/總共字數），再根據每個文字所占的區域設置字體大小。

理論上這種方案是可以行的，但是實際執行的過程中，突然發現，如果給出的字符中有標簽比如說 a 鏈接、img標簽等等，那么如何去計算總共的字數？如果算上這些標簽肯定會導致計算出的結果偏小。當然這個問題可以通過過濾標簽，然后計算出實際顯示的字數來解決。

但后續的問題又來了，當我計算出一個字體可以使用的面積是30px*30px，那此時字體應該是多大呢？ 30px？ 15px？ 沒人知道。。。。

這還不算，如果此時文字中包含數字英文神馬的，每個字的寬度都不同怎么辦？如何計算？

思考二：微調法

最終因為問題太多，我們放棄了第一種方案，提出了第二種微調法，該做法比較巧妙。

首先將文字放到一個容器中（比如說div），從最小的值開始（如12px），然后讀取此時的容器高度，比較有沒有超出最大的高度。如果沒有，把字體大小加一（13px），然后再次比較容器的高度和最大高度…… 依此類推，直到容器的大小大於最大的高度，此時，取前一個值就最佳文字大小。

由於調整的是最終的顯示大小，所以這種方法可以規避掉第一張方案的很多問題，比如說文字中含有標簽，中英混排等。

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

代碼

最后附上這個方案的代碼如下

//最大高度 var maxHeight = 200; //初始化文字大小為最小 wordbox.css('font-size', '12px'); //循環修改大小直至大於最大高度 for (var i = 12; i < 200; i++) { if (wordbox.height() > maxHeight) { //當容器高度大於最大高度的時候，上一個嘗試的值就是最佳大小。 wordbox.css('font-size', (i - 2) + 'px'); //結束循環 break; } else { //如果小於最大高度，文字大小加1繼續嘗試 wordbox.css('font-size', i + 'px'); } }