JS 计算字符串宽度

因为字体大小（字符串中包含中英文）、编码等原因，所以我们不能直接通过字符串长度 x 每个字符的fontSize 知道一个字符串所占的实际宽度。

较为准确的测量方式有如下两种：

  1. 把文本放入到一个dom元素中，随后获取dom元素的clientWidth 或者 offsetWidth(注意要盒模型，过滤掉padding 和 border等，此外内联元素的clientWidth始终为0)；

  2. 通过cavans获取：

function getTextWidth(text, font) {
  var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
  var context = canvas.getContext("2d"); 
  context.font = font;
  var metrics = context.measureText(text);
  return metrics.width;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容