I'm trying to do something like:

 $('<span>random text in here</span>').width()

But the width it's returning is 0. (The reason I'm trying to do this is to get the pixel width of a given text.)

How would I get this width, programmatically?

Thanks

I'm trying to do something like:

 $('<span>random text in here</span>').width()

But the width it's returning is 0. (The reason I'm trying to do this is to get the pixel width of a given text.)

How would I get this width, programmatically?

Thanks

• javascript
• jquery
• html

• 2 The width is 0 because the span has no size. It has not been added to the DOM. Where it lies in the DOM will change its font-size, and is therefore impossible to calculate without rendering it in some way. – zzzzBov Commented Nov 7, 2012 at 16:26

1 Answer 1

You have to have it rendered.

You may do this :

var s = $('<span>random text in here</span>');
s.appendTo(document.body);
var w = s.width();
s.remove();

Demonstration

Note that :

• nothing is displayed if you do this like I do in one go. For all practical purposes, nothing is inserted in the DOM,
• you could also use an in memory canvas but it wouldn't handle anything more plex than simple text and wouldn't take into account your span's css settings.

Here's the solution measuring the width of some text using an in memory canvas :

var canvas = document.createElement('canvas');
var c = canvas.getContext('2d');
// set here c.font to adjust it to your need
var w = c.measureText('random text in here').width;

Demonstration

I would use the first one in the general case but it might depend on why you want to measure the text.