您的位置：首页 > Web前端 > JavaScript

使用JavaScript对页面文字折行

2009-06-15 15:01 399 查看
最近在做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";
}
}

 
  
 

下面是测试页面的代码

 

 

<!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 function string xhtml button 测试
相关文章推荐
新的分享
章节导航