碰到一个问题，就是在页面展示的时候，很多情况下需要对显示的文字做折行处理，例如文字超过TD的宽度，或者DIV的宽度等等。
在IE下有word-break等等，但是在FF下，却是行不通，所以研究了一下，写了一个JS脚本，原理是这样的：
1. 首先，我们在页面上找一个span元素，用它来装载字符，然后通过它的宽度，来得到字符的显示宽度
2. 然后，我们在显示一个字符串的时候，就可以利用前面得到的字符宽度，计算出每个字符串的宽度
3. 在此基础上，计算出字符串应该折行的位置，插入
进行折行就不是什么问题了。
条件所限，blog不能上传附件，我在这里解释一下代码。
代码有2部分，一个是“textWidth.js”，他完成绝大部分的工作；另外一个是测试页面。
1. textWidth.js
| 源代码 | 说明 |
|---|---|
| @@######@@ |
内部成员变量 widthLib是一个保存某个字体、字号的所有字符的宽度的hash表； |
| @@######@@ |
计算字符串的长度。算法简单，就是把每个字符的宽度都加到一起就好了。 关键是getSizeLib(fontName, fontSize);这个函数，如果Hash表里没有这个字体字号的宽度数据，它会主动初始化相应的宽度数据 |
| @@######@@ | 计算折行。这个也简单，先从Hash表里拿到宽度数据，然后逐个计算，宽度超了，就加个 进去 |
| @@######@@ | 保存用于宽度计算的span元素 |
| @@######@@ | 取得指定字体字号的宽度数据。没有的话，就初始化一份 |
| @@######@@ | 初始化 |
| @@######@@ | |
下面是测试页面的代码
java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
304
收藏
