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 相关文章推荐
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
一些可能会用到的Node.js面试题
Jun 15 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
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编写简单的App接口
2016/08/28 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
js css样式操作代码(批量操作)
2009/10/09 Javascript
javascript 多浏览器 事件大全
2010/03/23 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
python实现bucket排序算法实例分析
2015/05/04 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
快速查询Python文档方法分享
2017/12/27 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
Python实现SMTP邮件发送
2020/06/16 Python
美国家具网站:Cymax
2016/09/17 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
Python的两道面试题
2013/06/29 面试题
简历自我评价怎么写好呢?
2014/01/04 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
美食节策划方案
2014/05/26 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
机械机修工岗位职责
2014/08/03 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
python调试工具Birdseye的使用教程
2021/05/25 Python