Finding text width in jquery

Question

I am trying to to calculate text width in px.

I will take a string from html, this string may contain some special characters as well (in this example just a hyphen), and make this string an html content of a div, and calculate string width.

But I am getting strange results.

If there is an better way to get text width, cross-browser!, please let me know.

I have made a fiddle:

http://jsfiddle.net/YaPcP/39/

Thank you!

You are calculating the width of the div. And as you didn't give him any width in the css, it takes all the window width. — romainberger
– romainberger, Commented Feb 22, 2012 at 23:00
I found this, maybe it will help you stackoverflow.com/questions/1582534/… — romainberger
– romainberger, Commented Feb 22, 2012 at 23:01

shaunsantacruz · Accepted Answer · 2012-02-23 00:58:27Z

1

Add float: left; to #holder

#holder which is the test container for width, is defaulting to width: auto;. In other words, it is spanning 100% of the browser window and giving you the mixed results.

You might consider adding white-space: nowrap; as well to #holder should it ever exceed the width of it's container.

Updated fiddle

edited Feb 23, 2012 at 0:58

answered Feb 22, 2012 at 23:03

shaunsantacruz

8,9403 gold badges21 silver badges19 bronze badges

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

Comments

SenorAmor · Accepted Answer · 2012-02-22 23:01:30Z

1

<div> elements are set to span the width of their parent element, so changing the font size will have no effect on its actual width. Changing your <div> to a <span> should give you what you're looking for.

answered Feb 22, 2012 at 23:01

SenorAmor

3,34518 silver badges27 bronze badges

1 Comment

Toniq Over a year ago

I edited original a little bit: jsfiddle.net/YaPcP/50. The only problem is it doesnt give the same results in every browser. In IE9 it almost 10px off and in Opera like 30px off.

Adaz · Accepted Answer · 2012-02-22 23:04:42Z

0

It may look nasty but gives you the width:

http://jsfiddle.net/adaz/YaPcP/43/

answered Feb 22, 2012 at 23:04

Adaz

1,66512 silver badges14 bronze badges

Collectives™ on Stack Overflow

Finding text width in jquery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related