JavaScript 撐出頁面文字換行

2024-05-06 14:15:08

字體：大中小

來源：轉載

供稿：網友

碰到一個問題，就是在頁面展示的時候，很多情況下需要對顯示的文字做折行處理，例如文字超過TD的寬度，或者DIV的寬度等等。
在IE下有word-break等等，但是在FF下，卻是行不通，所以研究了一下，寫了一個JS腳本，原理是這樣的：
1. 首先，我們在頁面上找一個span元素，用它來裝載字符，然后通過它的寬度，來得到字符的顯示寬度
2. 然后，我們在顯示一個字符串的時候，就可以利用前面得到的字符寬度，計算出每個字符串的寬度
3. 在此基礎上，計算出字符串應該折行的位置，插入<br/>進行折行就不是什么問題了。
條件所限，blog不能上傳附件，我在這里解釋一下代碼。
代碼有2部分，一個是“textWidth.js”，他完成絕大部分的工作；另外一個是測試頁面。
1. textWidth.js

源代碼說明

var TextWidth = new function() { var widthLib = new Hash(); var textSpan; var self = this;

內部成員變量

widthLib是一個保存某個字體、字號的所有字符的寬度的hash表；

 self.getWidth = function(string, fontName, fontSize) {     var lib = getSizeLib(fontName, fontSize);     var totalWidth = 0;          for(var i =0; i < string.length; i++) {       var c = string.charCodeAt(i);       if (c > 255) {         totalWidth += lib[256];       }else{         totalWidth += lib[c];       }     }     return totalWidth;   }

計算字符串的長度。算法簡單，就是把每個字符的寬度都加到一起就好了。

關鍵是getSizeLib(fontName, fontSize);這個函數(shù)，如果Hash表里沒有這個字體字號的寬度數(shù)據(jù)，它會主動初始化相應的寬度數(shù)據(jù)

  self.wrapText = function(string, fontName, fontSize, maxWidth) {     if (!string) {       return " ";     }     var origText = string.strip();     var lib = getSizeLib(fontName, fontSize);     var resultText = "";     var deltaW;     var totalW = 0;          for(var i =0; i < string.length; i++) {       var c = string.charCodeAt(i);       if (c > 255) {         deltaW = lib[256];       }else{         deltaW = lib[c];       }       if ((totalW + deltaW) > maxWidth)       {         resultText += "";         totalW = deltaW;       }else{         totalW += deltaW;       }       resultText += string.charAt(i);     }     return resultText;   }

計算折行。這個也簡單，先從Hash表里拿到寬度數(shù)據(jù)，然后逐個計算，寬度超了，就加個<br>進去

  self.setSpan = function(obj) {     textSpan = obj;     textSpan.hide();   }

保存用于寬度計算的span元素

  function getSizeLib(fontName, fontSize) {     if (!widthLib.get(getKey(fontName, fontSize))) {       initwidthLib(fontName, fontSize);     }     return widthLib.get(getKey(fontName, fontSize));   }

上一篇：Input 特殊事件onpopertychange和oninput

下一篇：javascript 獲取radio的value的函數(shù) [已測]