JS计算字符串在浏览器中显示的宽度

js计算字符串宽度

• 大家可能会碰到这样一个需求：一个容器的宽度固定，当内容的宽度超过容器的宽度时鼠标移入显示提示框，不超过时则不显示。

  这个时候就需要知道内容到底多宽。

怎么计算宽度

一 、估计法

假设文字大小是14px，如果字符的长度是10，那么内容的宽度大概是14*10=140
，这种方法显然误差很大，数字，特殊字符，英文字母，汉字的大小各不相同。

二、真实计算法

利用offsetWidth获取宽度
有时我们在计算宽度的时候，可能无法获取父节点的dom对象，这个时候怎么办呢？

话不多说直接上代码

function computedTextWidth(text) {
    let span = document.createElement('span');
    span.innerHTML = text;
    span.style.visibility = 'hidden';
    span.setAttribute('class','fontSize');
    let width = span.offsetWidth;
    document.getElementsByTagName('body')[0].removeChild(span);
    return width;
}
let str = '哈哈哈哈哈哈hhhhhh,。.,%$^!@(*&%^12345';
computedTextWidth(str);

总的思路就是：在计算方法里创建字符串的容器span，在把span挂载到body下，再利用
offsetWidth获取宽度，然后再移除span。

• 如果字符串有特殊的类，也要把类名加到span上，这样计算的宽度才准确。
• 计算高度的方法也类似。