使用JavaScript计算文字宽度

  • Z时代
  • 2024-01-10
  • 分类：问答

我想使用JavaScript计算字符串的宽度。是否可以不必使用等宽字体？

如果不是内置的，我唯一的想法就是为每个字符创建一个宽度表，但这是非常不合理的，特别是支持Unicode和不同类型的大小（以及与此相关的所有浏览器）。

回答：

创建具有以下样式的DIV。在JavaScript中，设置要测量的字体大小和属性，将字符串放入DIV中，然后读取DIV的当前宽度和高度。它将拉伸以适合内容，并且大小将在字符串呈现大小的几个像素之内。

var fontSize = 12;
var test = document.getElementById("Test");
test.style.fontSize = fontSize;
var height = (test.clientHeight + 1) + "px";
var width = (test.clientWidth + 1) + "px"
console.log(height, width);
#Test
{
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap; /* Thanks to Herb Caudill comment */
}
<div id="Test">
    abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>

以上是 使用JavaScript计算文字宽度 的全部内容， 来源链接： utcz.com/qa/431256.html

回到顶部