繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 撑出页面文字换行
- Javascript
- 用JavaScript实现浏览器地震效果
- Javascript实例教程(8) 利用Javascript基于浏览器类型的重定向
- Javascript实例教程(14) 鼠标触发窗口
- 使主页呈现“飞舞”特效
- Javascript实例教程(21) OLE Automation(1)
- Javascript实例教程(13) 鼠标移过时报警
- Javascript实例教程(10) 随机显示图片
- Javascript实例教程(2) 创建弹出式窗口
- JavaScript 小技巧(第十集)
- Javascript实例教程(3) 创建折叠式导航菜单
- Javascript实例教程(7) 利用Javascript进行密码保护
- 完美解决一个事件激活多个函数(2)
- Javascript模拟游戏中的弹出菜单效果
- Javascript实例教程(6) 在一个表单中设置和检查Cookies
- JavaScript 小技巧(第八集)
- Javascript实例教程(4) 探测浏览器插件
- JavaScript 小技巧(第九集)
- JavaScript学习:基础继承机制
- 初学Javascript之cookie篇(译)
- 让弹出窗口变得“体贴”一些(javascript)
Javascript 中的 JavaScript 撑出页面文字换行
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 154 ::
收藏到网摘: n/a
最近在做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请自行下载验证
评论 (0) All
