在進(jìn)行類似微博墻之類的展示頁面中，經(jīng)常會遇到這樣的需求：在固定大小的區(qū)域放入字?jǐn)?shù)不定的文字，但是要求字體可以自動改變大小來自動填充這些區(qū)域。如下所示：
遇到這種情況怎么辦呢？
看到需求我的第一個反應(yīng)是能不能通過計算，先獲取整個區(qū)域的大小，然后再根據(jù)字?jǐn)?shù)，計算出每個文字所占的區(qū)域（整體區(qū)域面積/總共字?jǐn)?shù)），再根據(jù)每個文字所占的區(qū)域設(shè)置字體大小。
理論上這種方案是可以行的，但是實(shí)際執(zhí)行的過程中，突然發(fā)現(xiàn)，如果給出的字符中有標(biāo)簽比如說 a 鏈接、img標(biāo)簽等等，那么如何去計算總共的字?jǐn)?shù)？如果算上這些標(biāo)簽肯定會導(dǎo)致計算出的結(jié)果偏小。當(dāng)然這個問題可以通過過濾標(biāo)簽，然后計算出實(shí)際顯示的字?jǐn)?shù)來解決。
但后續(xù)的問題又來了，當(dāng)我計算出一個字體可以使用的面積是30px*30px，那此時字體應(yīng)該是多大呢？ 30px？ 15px？ 沒人知道。。。。
這還不算，如果此時文字中包含數(shù)字英文神馬的，每個字的寬度都不同怎么辦？如何計算？
最終因為問題太多，我們放棄了第一種方案，提出了第二種微調(diào)法，該做法比較巧妙。
首先將文字放到一個容器中（比如說div），從最小的值開始（如12px），然后讀取此時的容器高度，比較有沒有超出最大的高度。如果沒有，把字體大小加一（13px），然后再次比較容器的高度和最大高度…… 依此類推，直到容器的大小大于最大的高度，此時，取前一個值就最佳文字大小。
由于調(diào)整的是最終的顯示大小，所以這種方法可以規(guī)避掉第一張方案的很多問題，比如說文字中含有標(biāo)簽，中英混排等。
到此，一種可行的解決方案誕生了。但是有人會問，這種頻繁的調(diào)整文字的大小，不停的獲取容器的高度，在性能上或者顯示上是不是會有問題？最初我也有這種懷疑，但是事實(shí)證明，包括IE6在內(nèi)，表現(xiàn)都非常好，用戶肉眼都看不到這個調(diào)整的過程。
最后附上這個方案的代碼如下
//最大高度var maxHeight = 200; //初始化文字大小為最小wordbox.css('font-size', '12px');//循環(huán)修改大小直至大于最大高度for (var i = 12; i < 200; i ) { if (wordbox.height() > maxHeight) { //當(dāng)容器高度大于最大高度的時候，上一個嘗試的值就是最佳大小。 wordbox.css('font-size', (i - 2) 'px'); //結(jié)束循環(huán) break; } else { //如果小于最大高度，文字大小加1繼續(xù)嘗試 wordbox.css('font-size', i 'px'); }}