|
|
碰到一個(gè)問題，就是在頁面展示的時(shí)候，很多情況下需要對(duì)顯示的文字做折行處理，例如文字超過TD的寬度，或者DIV的寬度等等。
在IE下有word-break等等，但是在FF下，卻是行不通，所以研究了一下，寫了一個(gè)JS腳本，原理是這樣的：
1. 首先，我們?cè)陧撁嫔险乙粋€(gè)span元素，用它來裝載字符，然后通過它的寬度，來得到字符的顯示寬度
2. 然后，我們?cè)陲@示一個(gè)字符串的時(shí)候，就可以利用前面得到的字符寬度，計(jì)算出每個(gè)字符串的寬度
3. 在此基礎(chǔ)上，計(jì)算出字符串應(yīng)該折行的位置，插入<br/>進(jìn)行折行就不是什么問題了。
條件所限，blog不能上傳附件，我在這里解釋一下代碼。
代碼有2部分，一個(gè)是“textWidth.js”，他完成絕大部分的工作；另外一個(gè)是測(cè)試頁面。
1. textWidth.js
| 源代碼 | 說明 |
|---|---|
var TextWidth = new function() { var widthLib = new Hash(); var textSpan; var self = this; | 內(nèi)部成員變量 widthLib是一個(gè)保存某個(gè)字體、字號(hào)的所有字符的寬度的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; } | 計(jì)算字符串的長(zhǎng)度。算法簡(jiǎn)單，就是把每個(gè)字符的寬度都加到一起就好了。 關(guān)鍵是getSizeLib(fontName, fontSize);這個(gè)函數(shù)，如果Hash表里沒有這個(gè)字體字號(hào)的寬度數(shù)據(jù)，它會(huì)主動(dòng)初始化相應(yīng)的寬度數(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; } | 計(jì)算折行。這個(gè)也簡(jiǎn)單，先從Hash表里拿到寬度數(shù)據(jù)，然后逐個(gè)計(jì)算，寬度超了，就加個(gè)<br>進(jìn)去 |
self.setSpan = function(obj) { textSpan = obj; textSpan.hide(); } | 保存用于寬度計(jì)算的span元素 |
function getSizeLib(fontName, fontSize) { if (!widthLib.get(getKey(fontName, fontSize))) { initwidthLib(fontName, fontSize); } return widthLib.get(getKey(fontName, fontSize)); } | 取得指定字體字號(hào)的寬度數(shù)據(jù)。沒有的話，就初始化一份 |
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"; } } | |
下面是測(cè)試頁面的代碼
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="Javascript" src="prototype.js"></script>
<script language="Javascript" src="textWidth.js"></script>
<title>無標(biāo)題文檔</title>
<style type="text/css">
* {
font-size: 14px;
font-family: Geneva,Arial,Helvetica,sans-serif;
}
</style>
</head>
<body>
<textarea id="in" type="text"></textarea><input type="button" value="test" onclick="runTest()"/><p/>
<textarea id="resultSpan" style="width: 900px;font-size: 14px; font-family: Geneva">
</textarea>
<div id="resultDisplay" style="font-size: 14px; font-family: Geneva;background-color:#e242E6; width:80px"></div>
<span id="textSpan" style="display:none"></span>
</body>
<script type="text/Javascript">
TextWidth.setSpan($('textSpan'));
function runTest() {
$('resultSpan').innerHTML = $("in").value;
var theWidth = TextWidth.getWidth($('resultSpan').innerHTML, "Geneva", 14);
$("resultDisplay").innerHTML = TextWidth.wrapText($('resultSpan').innerHTML, "Geneva", 14, 80);
}
</script>
</html>
prototype.js請(qǐng)自行下載驗(yàn)證
JavaScript技術(shù)：JavaScript 撐出頁面文字換行，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
