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

文本中由文字,有英文大小写,有数字还有各种符号。这时如果要用js判断它的长度为多少px。

1.获取字符串  str

2.将str拆成数组arr

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

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

5.最后求出文本长度。。。。。

O(∩_∩)O哈哈~,这么麻烦,看到第四部就知道有简单方法了吧!!!对!直接将这段文本放入一个行内标签,用js获取这个标签的长度,就是这么简单。

示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var str = '江山依旧在,几度夕阳红。Hello,大家好,好好学习,天天向上';
    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;
        document.querySelector('.getTextWidth').remove();
        return width;
    }

    var w = getTextWidth(str);
    console.log(w);
</script>
</body>
</html>

好了,简单的获取文本长度的函数有了。有改进的地方,欢迎留言指教

猜你喜欢

转载自blog.csdn.net/qq_40285497/article/details/83183117