JavaScript 撑出页面文字换行
JavaScript 撑出页面文字换行
发布时间:2016-12-30 来源:查字典编辑
摘要:碰到一个问题,就是在页面展示的时候,很多情况下需要对显示的文字做折行处理,例如文字超过TD的宽度,或者DIV的宽度等等。在IE下有word-...

碰到一个问题,就是在页面展示的时候,很多情况下需要对显示的文字做折行处理,例如文字超过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 < string.length; i++) { var c = string.charCodeAt(i); if (c > 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 < string.length; i++) { var c = string.charCodeAt(i); if (c > 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表里拿到宽度数据,然后逐个计算,宽度超了,就加个<br>进去
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<256; i++) { textSpan.update("中" + String.fromCharCode(i)+"中"); sizeLib[i] = textSpan.offsetWidth-2*sizeLib[256]; } textSpan.hide(); widthLib.set(key, sizeLib); } 初始化
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"/><p/>

<textarea id="resultSpan">

</textarea>

<div id="resultDisplay"></div>

<span id="textSpan"></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教程学习
编程开发子分类