基本信息

详细释义

在网页设计中的使用

基本信息

【词 语】 折 行

【注 音】 zhé xíng

【释 义】 ①水曲折流行；②降低辈份。

详细释义

① 谓水曲折流行。

《周礼·考工记·匠人》“凡行奠水，磬折以参伍” 郑玄 注引

汉 郑司农 云：“谓行停水，沟形当如磬，直行三，折行五。”

② 降低辈份。

明 王世贞 《石羊生传》：“而是时 南海 黎惟敬 …… 永嘉 康裕卿 先后抵 燕，发 元瑞 藏诗览之，咸啧啧折行请交。”

清 吴伟业 《茸城行》：“纵有名豪解折行，可堪小户胜狂药。”

在网页设计中的使用

折行在计算机网页设计中，折行是换行，HTML标签是<br />。

Web 页面在页面展示的时候，很多情况下需要对显示的文字做折行处理，例如文字超过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";

}

}