• 1.摘要
  • 2.基本信息
  • 3.详细释义
  • 4.在网页设计中的使用

折行

基本信息【词语】折行【注音】zhéxíng【释义】①水曲折流行;②降低辈份。

基本信息

  • 中文名

    折行

  • 拼音

    zhé xíng

  • 解释

    水曲折流行

  • 出处

    《周礼·考工记·匠人》

详细释义

① 谓水曲折流行。

② 降低辈份。

在网页设计中的使用

折行在计算机网页设计中,折行是换行,HTML标签是

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表;