基本介紹
- 中文名：折行
- 拼音：zhé xíng
- 注音：ㄕㄜˊ ㄒㄧㄥˊ
- 詞性：動詞
詞語解釋,網路術語,
詞語解釋
① 謂水曲折流行。
《周禮·考工記·匠人》“凡行奠水，磬折以參伍” 。
② 降低輩份。
明 王世貞 《石羊生傳》：“而是時南海黎惟敬 …… 永嘉 康裕卿 先後抵 燕，發 元瑞 藏詩覽之，鹹嘖嘖折行請交。”
清 吳偉業 《茸城行》：“縱有名豪解折行，可堪小戶勝狂藥。”
網路術語
在計算機網頁設計中，折行是換行，HTML標籤是<br />。
Web 頁面在頁面展示的時候，很多情況下需要對顯示的文字做折行處理，例如文字超過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);這個函式，如果Hash表里沒有這個字型字號的寬度數據，它會主動初始化相應的寬度數據
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表里拿到寬度數據，然後逐個計算，寬度超了，就加個<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));
}
取得指定字型字號的寬度數據。沒有的話，就初始化一份
function initwidthLib(fontName, fontSize) {
var key = getKey(fontName, fontSize);
var sizeLib = new Array(257);
textSpan.show();
textSpan.style.fontFamily = fontName;
textSpan.style.fontSize = fontSize+"px";
textSpan.update("中中中中中中中中中中");
sizeLib[256] = textSpan.offsetWidth/10;
for(var i = 0; i<256; i++) {
textSpan.update("中" + String.fromCharCode(i)+"中");
sizeLib[i] = textSpan.offsetWidth-2*sizeLib[256];
}
textSpan.hide();
widthLib.set(key, sizeLib);
}
初始化
function getKey(fontName, fontSize) {
return fontName+"@"+fontSize+"px";
}
}
