javascript 文字大小自動適應文字框 （文字大小自動調整）

標籤：

 javascript 文字大小自動適應文字框 （文字大小自動調整）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‘);    }}

javascript 文字大小自動適應文字框 （文字大小自動調整）