判斷一段文本具體長度爲多少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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。