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

最新推荐文章于 2022-10-20 21:16:00 发布

一叶知秋9307

最新推荐文章于 2022-10-20 21:16:00 发布

阅读量8.5k

点赞数 5

文章标签： js

本文链接：https://blog.csdn.net/qq_40285497/article/details/83183117

版权

文本中由文字，有英文大小写，有数字还有各种符号。这时如果要用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>

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

一叶知秋9307

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
判断一段文本具体长度为多少px

文本中由文字，有英文大小写，有数字还有各种符号。这时如果要用js判断它的长度为多少px。1.获取字符串 str2.将str拆成数组arr3.遍历arr，分别求出中文个数，大写英文个数，小写英文个数.......4.根据设置的字体大小，求出每种类型字符分别为多少px（直接输入文本，在网页里查看多大）5.最后求出文本长度。。。。。O(∩_∩)O哈哈~，这么麻烦，看到第四部就知...
复制链接

扫一扫