Finding width of text in Javascript [duplicate]

Question

Is there a way to find the width of text in Javascript (jQuery is used, so happy to take advantage of any functions they provide) for a hidden element?

I want to have a graph of nodes. Each node has text inside and I want the nodes to have a width that accommodates the text up to a limit. So I essentially create hidden <div>'s with some html inside. Then I use jQuery to display those <div>'s on the graph at the right spots. It's important that I know the correct width ahead of time so I can construct the graph properly.

UPDATE: Just to clarify, I need to know how wide some text is while it's hidden. Blender gave an answer below, I'm hoping there's a less tricky way?

What do you mean "width of text"? You mean how many characters in a string, or width of a control? — Nick Rolando
– Nick Rolando, Commented Mar 2, 2011 at 23:03
@at - your question really is, "Given a string of text, how do I figure out how many pixels wide it will be when rendered by the browser?" right? — Pointy
– Pointy, Commented Mar 2, 2011 at 23:07

Blender · Accepted Answer · 2011-03-02 23:17:46Z

1

What width do you mean? If you mean the <div> element's width, there's a handy function which does just what you need. Play with some of these:

$('#foo').width();
$('#foo').innerWidth();
$('#foo').outerWidth();

As for finding the width of a hidden element, I usually do this dirty trick:

var zIndex = $('#foo').css('z-index');

$('#foo').css('z-index', '-10');
$('#foo').css('position', 'absolute');
$('#foo').css('display', 'block');

var fooWidth = $('#foo').width();

$('#foo').css('display', 'none');
$('#foo').css('z-index', zIndex);

There must be a simpler way, though...

edited Mar 2, 2011 at 23:17

answered Mar 2, 2011 at 23:05

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Detect · Accepted Answer · 2011-03-02 23:05:13Z

1

$('#txt').width()

http://jsfiddle.net/Detect/jk97D/

answered Mar 2, 2011 at 23:05

Detect

2,0691 gold badge12 silver badges21 bronze badges

Comments

Meligy · Accepted Answer · 2011-03-02 23:06:30Z

1

You can set the style of the divs to have no wrap white-space:nowrap (so, text is in one line) then get the width of each div, if more than the limit, set it to the limit and set the style to allow text wrapping `white-space:normal

answered Mar 2, 2011 at 23:06

Meligy

36.7k11 gold badges90 silver badges114 bronze badges

2 Comments

Pointy Over a year ago

Who would downvote this? It's a good answer.

Meligy Over a year ago

Well, you can help change it :D - Thanks BTW.

Zoidberg · Accepted Answer · 2011-03-02 23:15:03Z

0

Just throwing in a non-JQuery answer to this. Assume I have a work div with id myworkerdiv and i have put my text in already.

var myDiv document.getElementById('myworkerdiv'),
width = myDiv.clientWidth || myDiv.scrollWidth;

You can also find out height as well, if your so included (clientHeight || scrollHeight).

answered Mar 2, 2011 at 23:15

Zoidberg

10.4k2 gold badges34 silver badges53 bronze badges

Comments

Ben · Accepted Answer · 2011-03-23 16:28:03Z

0

You could use something similar blender's method, but use the visibility css property rather than display. Visibility:hidden; keeps placement of the element, but just makes it invisible.

answered Mar 23, 2011 at 16:28

Ben

3,02510 gold badges31 silver badges48 bronze badges

Collectives™ on Stack Overflow

Finding width of text in Javascript [duplicate]

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Linked

Related