获取实际文字宽度

Posted 2021-11-02 vieber

问题背景

有时候我们需要获取一个div的实际宽度，但是里面的是文字，比如文字只占了一半，但是这个div的宽度是100%，这样就没法获取这个div的实际宽度了

解决方案

使用canvas的这个api去获取CanvasRenderingContext2D.measureText()
CanvasRenderingContext2D.measureText() 方法返回一个关于被测量文本TextMetrics 对象包含的信息（例如它的宽度）。
他就能把被测量文本的实际宽度测量出来。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;