JS怎么计算html标签里文字的宽度
方法： 做一个空的html 标签 id为“ruler”,样式为“position:absolute;visibility: hidden; white-space: nowrap;z-index: -100”;
目的为了不影响页面，只是用来放你要测的文字的宽度，得到目标文字的内容，大小和字体.放到如下方法就行了：
|
1
2
3
4
5
6
7
8
9
|
String.prototype.visualLength = function(size,family) { var ruler = $("#ruler").css({ "font-size":size || "inherit", "font-family":family || "inherit" }); ruler.text(this); return ruler.width(); } |
实例如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html><html><head></head><style> #ruler { position:absolute; visibility: hidden; white-space: nowrap; z-index: -100; }</style><body><span id="ruler">test</span><span >tasdfasdfasdfest</span><script src="./jquery.min.js"></script><script> String.prototype.visualLength = function(size,family) { var ruler = $("#ruler").css({ "font-size":size || "inherit", "font-family":family || "inherit" }); ruler.text(this); return ruler.width(); } var text = "tasdfasdfasdfest"; var len = text.visualLength("16px"); console.log(len)</script></body></html> |
转：https://www.cnblogs.com/flxy-1028/p/7813836.html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律