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

最新推荐文章于 2025-05-10 09:18:47 发布

原创最新推荐文章于 2025-05-10 09:18:47 发布 · 8.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍了一种使用JavaScript简便地测量文本长度（以像素为单位）的方法。通过将文本放入一个行内HTML元素并利用offsetWidth属性，可以快速获取任意文本在特定字体大小设置下的实际宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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