JavaScript 撑出页面文字换行


Posted in Javascript onJune 15, 2009

碰到一个问题,就是在页面展示的时候,很多情况下需要对显示的文字做折行处理,例如文字超过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 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 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表里拿到宽度数据,然后逐个计算,宽度超了,就加个
进去
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  初始化
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 网页跳转的方法
Dec 24 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
详解js的六大数据类型
Dec 27 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
微信小程序实现签到功能
Oct 31 Javascript
vuex的module模块用法示例
Nov 12 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
jquery.alert 弹出式复选框实现代码
Jun 15 #Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 #Javascript
FireFox JavaScript全局Event对象
Jun 14 #Javascript
Javascript 错误处理的几种方法
Jun 13 #Javascript
Javascript 学习书 推荐
Jun 13 #Javascript
javascript 框架小结 个人工作经验
Jun 13 #Javascript
动态刷新 dorado树的js代码
Jun 12 #Javascript
You might like
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
PHP进程通信基础之信号
2017/02/19 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
Python求凸包及多边形面积教程
2020/04/12 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
联想德国官网:Lenovo Germany
2018/07/04 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
中专生学习生活的自我评价分享
2013/10/27 职场文书
大学教师年终总结的自我评价
2013/10/29 职场文书
工地资料员岗位职责
2013/12/31 职场文书
建筑经济管理专业求职信分享
2014/01/06 职场文书
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
优秀求职信范文分享
2014/01/26 职场文书
幼儿园新年寄语
2014/04/03 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
浅谈MySQL之select优化方案
2021/08/07 MySQL
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js