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 formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
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 foreach、while性能比较
2009/10/15 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
详谈javascript异步编程
2016/02/21 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
vue 左滑删除功能的示例代码
2019/01/28 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
Python全排列操作实例分析
2018/07/24 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
求职自荐信怎么写
2014/03/06 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
Python实现制作销售数据可视化看板详解
2021/11/27 Python