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请自行下载验证

JavaScript技术JavaScript 撑出页面文字换行,转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。