js计算文本的宽度

原创

liuhao951866 2022-03-10 10:41:00 博主文章分类：常用代码片段 ©著作权

文章标签 javascript 前端 css3 默认值 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者liuhao951866的原创作品，请联系作者获取转载授权，否则将追究法律责任

function getTextWidth (text, fontSize) {
        //fontSize:代表汉字的大小，英文字会自动按照默认值
        var span = document.createElement("span");
        var result = {};
        span.style.visibility = "hidden";
        span.style.fontSize = fontSize;
        span.style.overflow = "hidden";
        span.style.whiteSpace = "nowrap";
        span.style.textOverflow = "ellipsis";
        span.style.minWidth = "30px";
        span.style.maxWidth = "120px";
        span.style.position = "absolute";
        span.style.padding = "0 3px";
        span.style.marginLeft = "15px";
        document.body.appendChild(span);
        if (typeof span.textContent !== "undefined") {
            span.textContent = text;
        } else {
            span.innerText = text;
        }
        result.width = span.offsetWidth;// - result.width;
        // result.height = span.offsetHeight;// - result.height;
        span.parentNode.removeChild(span);
        return result.width;
    };