牛骨文教育服务平台(让学习变的简单)
博文笔记

JS计算任意字符串宽度

创建时间:2016-11-09 投稿人: 浏览次数:225

注意是宽度不是长度!


由于像素和字体大小,字节(特别是UTF-8)等限制因素,使得想要知道一个字符串所占的实际宽度并不是那么容易。

下面提供一种比较方便实用的方法:

用个visibility:hidden的浮动的层来计算字符串宽度。

在添加的div容器里把样式设置为和你实际的div一样。

<!DOCTYPE html>
<html> 
<head>
  <script src="jquery.min.js"></script>
</head>
<body>
  <div id="labelText" style="color:black;line-height:1.2;white-space:nowrap;top:0px;left:0px;position:fixed;display:block;visibility:visible;">
    
  </div>

  <script>
    var str="Live like you were dying, Love because you do.";
    str = str.substring(0,str.length);
    $("#labelText").css({
      "font-size": "12px",
      "font-family": "Microsoft YaHei"
    }).html(str);
    var width = $("#labelText").width();
    console.log(width);
</script>
</body>
</html>


计算高度也一样。

最后别忘了要移除添加的额外的div哦!

声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。