JS获取文本在HTML中的真实长度
2015-11-24 21:25
686 查看
当控件内字符串大小 超过 控件字符显示区域 大小,就发生了truncation。
表现在Web应用中,就是HTML中的某个元素(控件)与元素value(字符)的大小不符,如下图所示。
根据[1]中给出的方法,可以得到文本的宽度。它是将文本构造成一个带hidden属性的div,然后获取其CSS属性来得到宽度的。
这里比较关键的就是获取浏览器默认font属性的方法。要注意不同浏览器中不同元素的默认font是不一样的,chrome下input元素的默认font-size是13.3333px,默认font-family是Arial。而div元素的默认font-size是16px,默认font-family是Times New Roman。可以用jQuery得到这些参数:
本文测试源代码:
参考:
[1] http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
表现在Web应用中,就是HTML中的某个元素(控件)与元素value(字符)的大小不符,如下图所示。
根据[1]中给出的方法,可以得到文本的宽度。它是将文本构造成一个带hidden属性的div,然后获取其CSS属性来得到宽度的。
这里比较关键的就是获取浏览器默认font属性的方法。要注意不同浏览器中不同元素的默认font是不一样的,chrome下input元素的默认font-size是13.3333px,默认font-family是Arial。而div元素的默认font-size是16px,默认font-family是Times New Roman。可以用jQuery得到这些参数:
$('input').css('font-size'); $('input').css('font-family');为了测试[1]中的方法检测的准不准,在Chrome中将input元素的字符宽度调整为检测值152px后,input元素的truncation消失了。
本文测试源代码:
<html> <head> </head> <body> <div> <input id="btn" type="button" value="hello html truncation issue" style="width:150px"></input> </div> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> String.prototype.width = function(font) { var f = font || '12px arial', o = $('<div>' + this + '</div>') .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f}) .appendTo($('body')), w = o.width(); o.remove(); return w; } $(document).ready(function(){ ele = document.getElementById('btn'); //get input element default font properties ele_font_size = $('input').css('font-size'); ele_font_family = $('input').css('font-family'); console.log("hello html truncation issue".width( ele_font_size + " " + ele_font_family)); }); </script> </body> </html>
参考:
[1] http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
相关文章推荐
- 关于Javascript函数的一些思考(一)
- JavaScript DOM编程艺术学习笔记-第二章JavaScript语法
- 图解Javascript this指向什么?
- 如何将js中的值传到后台action中
- JavaScript Number数字类型
- JS封装缓动动画函数
- 用jsch.jar实现SFTP上传下载删除
- jsp内置对象作业1-用户登录
- jsp跳转servlet,servlet跳转jsp,servlet跳转servlet的路径问题
- js资源
- ajax+json+servlet实现表格的基本功能
- 有关fastjson输出的时候double不输出后面.0的问题
- BZOJ1012: [JSOI2008]最大数maxnumber
- javascript模块化编程二(AMD规范)
- javascript模块化编程一
- 南大软院大神养成计划--js
- JavaScript学习之路10_箭头函数
- DOM-JavaScript
- js控制元素隐藏显示,显示时不用display=block
- Servlet/JSP