在javascript中以像素为单位测量字符串的长度

Question

如果我知道font-size和font-family，如何在javascript中找到字符串的长度（以像素为单位）？

Answer 1

最简单的解决方案是创建一个内存画布（即未添加到DOM中的画布），然后使用measureText函数：

var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
ctx.font = "11px Arial";        
var width = ctx.measureText(str).width;

Answer 2

你可以将你的字符串放入段落并使用jquery width函数来获得像素width

的宽度

    function showWidth(ele, w) {
$("div").text("The width for the " + ele +
" is " + w + "px.");
}
$("#getp").click(function () {
showWidth("paragraph", $("p").width());
});

check jsfiddle