Get string length in pixels with JavaScript - Stack Overflow

admin管理员组

文章数量:1296257

Let's say I have the string "Hello". This string is obviously five characters in length, but what is its length in pixels? Is there an easy way to determine this length in JavaScript? I have thought of a solution where an extra div would have to be displayed to the user, but this way seems hacky and plicated.

In the bigger picture, I am trying to determine how many spaces would be necessary to fill that length of the string. As you can probably tell from above, I think the best option would be to simply measure the length of the string and a single space character from the user's perspective and calculate how many spaces should replace the text based off of that. This is going to be displayed in an HTML input text, by the way.

Thanks.

Let's say I have the string "Hello". This string is obviously five characters in length, but what is its length in pixels? Is there an easy way to determine this length in JavaScript? I have thought of a solution where an extra div would have to be displayed to the user, but this way seems hacky and plicated.

In the bigger picture, I am trying to determine how many spaces would be necessary to fill that length of the string. As you can probably tell from above, I think the best option would be to simply measure the length of the string and a single space character from the user's perspective and calculate how many spaces should replace the text based off of that. This is going to be displayed in an HTML input text, by the way.

Thanks.

• javascript
• string
• text
• pixel

Share Improve this question Follow asked Feb 5, 2011 at 23:27 GusGus 1,92366 gold badges2626 silver badges3737 bronze badges 3

• You probably want the width in pixels of an element, which content is the string "Hello". Am I right? – Pablo Fernandez Commented Feb 5, 2011 at 23:35
• I suggest using a monospaced font then you would know how many spaces it takes. ;) en.wikipedia/wiki/Monospaced_font – JoeyRobichaud Commented Feb 5, 2011 at 23:35
• @JoeRobich I believe unicode throws off the 1-character-1-glyph assumption :-) – user166390 Commented Feb 6, 2011 at 0:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can determine the number of pixels the container of the string. You can do this by creating a hidden element in the DOM, setting the inner HTML to the string and then asking for the width.

I don't think their is a good, easy way to do that, except puting the length of a container. The width depends on the font-size, the font, the letter-spacing, it will be different depending on the browser etc...

I've used this to determine the text length in pixels (jQuery syntax):

var txtLen = $(<selector>).text().length * $(<selector>).css('font-size').slice(0,-2);

where selector is whatever you use to target the specific element. Adjust where needed (if the font-size is not set in px).

For example:

var txtLen = $('table td').text().length * $('table td').css('font-size').slice(0,-2);

Real-life use of this was when I needed to determine whether to show the tooltip on a td with a fixed width - if td is wider than its contents, there is no need to show the tooltip.

Things stated in Robin's answer still apply.

本文标签： Get string length in pixels with JavaScriptStack Overflow