判断一段文本具体长度为多少px

时间 2019-11-17

标签判断一段文本具体长度多少栏目 CSS 繁體版

原文原文链接

文本中由文字，有英文大小写，有数字还有各类符号。这时若是要用js判断它的长度为多少px。html

1.获取字符串 str数组

2.将str拆成数组arr浏览器

3.遍历arr，分别求出中文个数，大写英文个数，小写英文个数.......app

4.根据设置的字体大小，求出每种类型字符分别为多少px（直接输入文本，在网页里查看多大）ide

5.最后求出文本长度字体

示例代码以下：this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var str = '江山如此多娇，引无数英雄竞折腰。俱往矣，数风流人物，还看今朝。';

    /**
     * 获取一段文本具体长度为多少px
     * @param str
     * @returns {number}
    */
    function getTextWidth(str) {
        var width = 0;
        var html = document.createElement('span');
        html.innerText = str;
        html.className = 'getTextWidth';
        document.querySelector('body').appendChild(html);
        width = document.querySelector('.getTextWidth').offsetWidth;
        if(isIE()||isIE11()) {
            document.querySelector('.getTextWidth').removeNode(this);
        }else {
            document.querySelector('.getTextWidth').remove();
        }
        return width;
    }
    /**
     * 判断是不是IE浏览器
     * @returns {boolean}
     */
    function isIE(){
        if(!!window.ActiveXObject || "ActiveXObject" in window){
            return true;
         }else{
            return false;
         }
    }
    /**
     * 判断是不是IE11浏览器
     * @returns {boolean}
     */
    function isIE11(){
        if((/Trident\/7\./).test(navigator.userAgent)){
            return true;
        }else{
        return false;
     }
    }
 
    var w = getTextWidth(str);
    console.log(w);
</script>
</body>
</html>