JavaScript 撑出页面文字换行

碰到一个问题，就是在页面展示的时候，很多情况下需要对显示的文字做折行处理，例如文字超过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"; } } 下面是测试页面的代码复制代码代码如下:<!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>无标题文档</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请自行下载验证

　　推荐阅读

　　firefo xml 读写实现js代码

一读xml文件到字符串第一步：将xml文件，转化为DOM结构 1 var xmlDoc = document.implementation.createDocument("", "test", null); xmlDoc.load("d:\develop\bookmarks.xml"); 2 var req = new XMLHttpReque>>>详细阅读

本文标题：JavaScript 撑出页面文字换行

地址：http://www.17bianji.com/kaifa2/JS/28565.html

1/2 1