javascript 文字大小自动适应文本框 (文字大小自动调整)
2015-07-21 08:43
591 查看
javascript 文字大小自动适应文本框 (文字大小自动调整)
TOC
思考思考一:面积法
思考二:微调法
代码
在进行类似微博墙之类的展示页面中,经常会遇到这样的需求:在固定大小的区域放入字数不定的文字,但是要求字体可以自动改变大小来自动填充这些区域。如下所示:
遇到这种情况怎么办呢?
思考
思考一:面积法
看到需求我的第一个反应是能不能通过计算,先获取整个区域的大小,然后再根据字数,计算出每个文字所占的区域(整体区域面积/总共字数),再根据每个文字所占的区域设置字体大小。理论上这种方案是可以行的,但是实际执行的过程中,突然发现,如果给出的字符中有标签比如说 a 链接、img标签等等,那么如何去计算总共的字数?如果算上这些标签肯定会导致计算出的结果偏小。当然这个问题可以通过过滤标签,然后计算出实际显示的字数来解决。
但后续的问题又来了,当我计算出一个字体可以使用的面积是30px*30px,那此时字体应该是多大呢? 30px? 15px? 没人知道。。。。
这还不算,如果此时文字中包含数字英文神马的,每个字的宽度都不同怎么办?如何计算?
思考二:微调法
最终因为问题太多,我们放弃了第一种方案,提出了第二种微调法,该做法比较巧妙。首先将文字放到一个容器中(比如说div),从最小的值开始(如12px),然后读取此时的容器高度,比较有没有超出最大的高度。如果没有,把字体大小加一(13px),然后再次比较容器的高度和最大高度…… 依此类推,直到容器的大小大于最大的高度,此时,取前一个值就最佳文字大小。
由于调整的是最终的显示大小,所以这种方法可以规避掉第一张方案的很多问题,比如说文字中含有标签,中英混排等。
到此,一种可行的解决方案诞生了。但是有人会问,这种频繁的调整文字的大小,不停的获取容器的高度,在性能上或者显示上是不是会有问题?最初我也有这种怀疑,但是事实证明,包括IE6在内,表现都非常好,用户肉眼都看不到这个调整的过程。
代码
最后附上这个方案的代码如下//最大高度 var maxHeight = 200; //初始化文字大小为最小 wordbox.css('font-size', '12px'); //循环修改大小直至大于最大高度 for (var i = 12; i < 200; i++) { if (wordbox.height() > maxHeight) { //当容器高度大于最大高度的时候,上一个尝试的值就是最佳大小。 wordbox.css('font-size', (i - 2) + 'px'); //结束循环 break; } else { //如果小于最大高度,文字大小加1继续尝试 wordbox.css('font-size', i + 'px'); } }
相关文章推荐
- ideaIU14.4配置coco 4000 s2d-js环境
- JSON概述
- JavaScript高级——事件监听控制
- ------------参数传递的四种形式----- URL,超链接,js,form表单
- Day03-JavaScript高级编程
- Day02-CSS+Javascript基础
- JavaScript——高级——DOM——节点访问
- 异步安全加载javascript文件的方法
- Javascript实现获取及设置光标位置的方法
- javascript实现网页屏蔽Backspace事件,输入框不屏蔽
- js字符串转换成数字与数字转换成字符串的实现方法
- 奇淫異術: javascript 的超cool 技巧。
- jqGrid中prmNames,jsonReader,colModel的参数简介
- javascript中,实现的string的format函数
- 算法导论 第二十四章:单源最短路径
- Javascript正则构造函数与正则表达字面量&&常用正则表达式
- 【小练习】js冒泡排序
- 《JavaScript设计模式与开发实践》读书笔记之享元模式
- javascript 盒子模型
- jstack(查看线程)、jmap(查看内存)和jstat(性能分析)命令