如何动态测量字体宽度

前几天由于项目需要，需要把太长的字符省略显示，鼠标放上去的时候显示出来，然后去找了个插件，但是完成之后发现字符串没有出现省略号时，鼠标放上去也会显示，这与需求不符，于是想到使用字符串长度，也就是字符的个数乘以字体大小和包裹字符串的元素相比，发现不对，因为字体的大小并不等于字体宽度，而是等于字体高度，中文的时候宽度和高度相差还不是很大，数字时就更大一点，误差就更大，符号时宽高相差就更大，误差就更大。也总是在没有省略号的时候，鼠标放上去也会显示。

所以使用如下办法：

function StrPxLength(str){
    var canvas = document.createElement("canvas");
    var context = canvas.getContext('2d');
    context.font = "16px 宋体";//设置字体大小和字体样式
    var text = context.measureText(str);
    console.log(text.width);
}

StrPxLength("1");//8px
StrPxLength("1234");//32px
StrPxLength("邹");//16px
StrPxLength("邹网");//32px
StrPxLength("!");//8px
StrPxLength("!?(");//24px

canvas中有一个专门测量字符串宽度的方法measureText。

使用canvas的measureText测量字符串宽度之前，一定要设置你测量的字体大小和字体样式

首先获取到所需测量的字符串，然后动态创建出canvas元素，获取到它的上下文context，使用它的字符串测量方法measureText测出实际的字符串的宽度，与所包裹的元素的宽度进行比较，再来决定在鼠标移上去时是否显示内容

个人博客:https://hzlzh.com.cn/