JavaScript 撐出頁(yè)面文字換行
更新時(shí)間：2009年06月15日 18:59:44 作者：
最近在做Web 頁(yè)面，雖然不是很喜歡，不過(guò)既然公司安排了，就好好做吧，還是學(xué)了不少東西。
碰到一個(gè)問(wèn)題，就是在頁(yè)面展示的時(shí)候，很多情況下需要對(duì)顯示的文字做折行處理，例如文字超過(guò)TD的寬度，或者DIV的寬度等等。
在IE下有word-break等等，但是在FF下，卻是行不通，所以研究了一下，寫(xiě)了一個(gè)JS腳本，原理是這樣的：
1. 首先，我們?cè)陧?yè)面上找一個(gè)span元素，用它來(lái)裝載字符，然后通過(guò)它的寬度，來(lái)得到字符的顯示寬度
2. 然后，我們?cè)陲@示一個(gè)字符串的時(shí)候，就可以利用前面得到的字符寬度，計(jì)算出每個(gè)字符串的寬度
3. 在此基礎(chǔ)上，計(jì)算出字符串應(yīng)該折行的位置，插入<br/>進(jìn)行折行就不是什么問(wèn)題了。
條件所限，blog不能上傳附件，我在這里解釋一下代碼。
代碼有2部分，一個(gè)是“textWidth.js”，他完成絕大部分的工作；另外一個(gè)是測(cè)試頁(yè)面。
1. textWidth.js
| 源代碼 | 說(shuō)明 |
|---|---|
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表里沒(méi)有這個(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ù)。沒(méi)有的話，就初始化一份 |
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è)試頁(yè)面的代碼
復(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>無(wú)標(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)證
相關(guān)文章
原生JS實(shí)現(xiàn)簡(jiǎn)單放大鏡效果
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)簡(jiǎn)單放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了JavaScript數(shù)組的使用方法，數(shù)組（Array）是有序的元素序列。若將有限個(gè)類型相同的變量的集合命名，那么這個(gè)名稱為數(shù)組名，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
uniapp添加操作日志的方法(uniapp、日志、文件、html5+)
近期一直在寫(xiě)微信小程序,有一個(gè)問(wèn)題一直沒(méi)有解決,就是在測(cè)試環(huán)境中調(diào)試代碼會(huì)打印很多日志,方便看到問(wèn)題所在,這篇文章主要給大家介紹了關(guān)于uniapp添加操作日志(uniapp、日志、文件、html5+)的相關(guān)資料,需要的朋友可以參考下
2023-11-11 
javascript中的replace函數(shù)(帶注釋demo)
在js中有兩個(gè)replace函數(shù) 一個(gè)是location.replace(url) 跳轉(zhuǎn)到一個(gè)新的url.一個(gè)string.replace("xx","yy") 替換字符串 返回一個(gè)新的字符串，該方法并不改變字符串本身。下面通過(guò)本文給大家介紹javascript中的replace函數(shù)
2018-01-01 
這篇文章主要介紹了10大Js圖像處理庫(kù)，對(duì)圖像處理感興趣的同學(xué)，可以參考下
2021-04-04 
js、css、img等瀏覽器緩存問(wèn)題的2種解決方案
瀏覽器緩存的意義在于提高了執(zhí)行效率，但是也隨之而來(lái)帶來(lái)了一些問(wèn)題，導(dǎo)致服務(wù)端修改了js、css，客戶端不能更新，下面有幾個(gè)不錯(cuò)的方法可以解決此問(wèn)題，感興趣的朋友可以參考下
2013-10-10 
JavaScript設(shè)計(jì)模式手寫(xiě)示例講解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式手寫(xiě)示例，設(shè)計(jì)模式（Design pattern） 是解決軟件開(kāi)發(fā)某些特定問(wèn)題而提出的一些解決方案也可以理解成解決問(wèn)題的一些思路。通過(guò)設(shè)計(jì)模式可以幫助我們?cè)鰪?qiáng)代碼的可重用性、可擴(kuò)充性、 可維護(hù)性、靈活性好
2022-12-12 
JS實(shí)現(xiàn)簡(jiǎn)單計(jì)數(shù)器
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單計(jì)數(shù)器，有加、減和零三個(gè)按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10 
兩種WEB下的模態(tài)對(duì)話框 （asp.net或js的分別實(shí)現(xiàn)）
在如今互聯(lián)網(wǎng)網(wǎng)站上，AJAX效果風(fēng)靡一時(shí)，應(yīng)該說(shuō)AJAX技術(shù)在未來(lái)幾年不會(huì)動(dòng)搖，在AJAX效果中，模態(tài)對(duì)話框是比較常見(jiàn)的效果，也是非常適用的。
2009-12-12