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的链式调用浅析
Dec 03 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 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编写RESTful接口的方法
2016/02/21 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
python数组过滤实现方法
2015/07/27 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
python万年历实现代码 含运行结果
2017/05/20 Python
python super用法及原理详解
2020/01/20 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
校运会口号
2014/06/18 职场文书
调任通知
2015/04/21 职场文书
农业项目投资意向书
2015/05/09 职场文书
2016年五一促销广告语
2016/01/28 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis