用 JavaScript 计算文本宽度

小编典典

用 JavaScript 计算文本宽度

all

我想使用 JavaScript 来计算字符串的宽度。这是否可能无需使用等宽字体？

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

阅读 140

2022-03-09

共1个答案

小编典典

创建一个具有以下样式的 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>

2022-03-09