Measuring length of string in pixel in javascript

Question

How do I find the length of string in pixels in javascript , if I know the font-size and font-family?

Answer 1

The simplest solution is to create an in memory canvas (i.e. one that isn't added to the DOM) and then use the measureText function :

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

Answer 2

you can put your string into paragraph and use the jquery width function to get the width in pixel width

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

check jsfiddle