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 读取xml,写入xml 实现代码
Jul 10 Javascript
Prototype 工具函数 学习
Jul 23 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 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
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
javascript 学习之旅 (1)
2009/02/05 Javascript
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
Python编程argparse入门浅析
2018/02/07 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
linux安装python修改默认python版本方法
2019/03/31 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Python tcp传输代码实例解析
2020/03/18 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
本科毕业生自荐信
2014/06/02 职场文书
电教室标语
2014/06/20 职场文书
高中班主任评语
2014/12/30 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python