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 相关文章推荐
为原生js Array增加each方法
Apr 07 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
js闭包用法实例详解
Dec 13 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 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连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
PHP小教程之实现链表
2014/06/09 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
使用python实现rsa算法代码
2016/02/17 Python
python 系统调用的实例详解
2017/07/11 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
当当网软件测试笔试题
2015/11/24 面试题
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
教学个人的自我评价分享
2014/02/16 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
起诉意见书范文
2015/05/19 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
2016大一新生军训感言
2015/12/08 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
python实现简单石头剪刀布游戏
2021/10/24 Python
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers