How to calculate the length (in pixels) of a string in JavaScript?

Question

How to calculate the length (in pixels) of a string in JavaScript?

Answer 1

Given the new information that you want to add an ellipsis for text overflow, I think the CSS overflow property is the best approach. See this quirksmode article for more information: http://www.quirksmode.org/css/textoverflow.html

Answer 2

you can use simple code

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

Answer 3

A working simshaun suggestion example: http://jsfiddle.net/tycjf/2/

Answer 4

The easiest way is to write it to a range on the page, get the width, and then delete the range. Also, this is relative to any font size that inherits a range.