奇巧淫技之计算页面上文字所占的像素

来源：互联网发布：数据统计的目的编辑：程序博客网时间：2024/05/20 15:12

转载自：http://www.myjscode.com/page/article15.html

适用于一行显示的文字，特别是判断文字是否出现省略号很有用。

思路是把文字复制出来放在一个visibility:hidden隐藏的容器中，计算文字当前容器的font-size和padding，设置为隐藏容器的css样式，最后计算隐藏容器的宽度就可以了。

应用场景比如bootstrap的tooltip，当文字超出或者出现省略号，才会显示提示悬浮框。当文字没有超出没有省略号时，鼠标hover不会显示悬浮框

/**css**/.ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}div{width:200px;}/*文字占用像素长*/#fontSizeruler{    position:absolute;    top:-100px;    visibility: hidden;     white-space: nowrap;     display:inline-block;}

/**html**/<body>    <span id="fontSizeruler" class="ellipsis" >ffwfwffwefwe测试文字超出就会有省略号</span>    <div id="test"></div></body>

/**javascript**/  var title = $("#test").text();  var fontSize = $("#test").css("font-size") ;  var fontWidth = $("#fontSizeruler").css("font-size",fontSize).text(title).width() ;

0 0