javascript - Get css width from a string - Stack Overflow

admin管理员组

文章数量:1313121

I have a string that I want to display on a web page that is dynamically passed in. I want to be able to dynamically determine the css width needed to display this string and then wrap it in an html element with the exact size needed to display it.

I am currently using javascript and dojo, so answers using those two are fine, but anything else won't work.

More Detail I guess I should clarify. I want to display the string in an input field, so not as simple as a div (I think at least)

I have a string that I want to display on a web page that is dynamically passed in. I want to be able to dynamically determine the css width needed to display this string and then wrap it in an html element with the exact size needed to display it.

I am currently using javascript and dojo, so answers using those two are fine, but anything else won't work.

More Detail I guess I should clarify. I want to display the string in an input field, so not as simple as a div (I think at least)

• javascript
• html
• css
• dojo

Share Improve this question Follow asked Feb 14, 2012 at 19:33 hbhakhrahbhakhra 4,23622 gold badges2323 silver badges3636 bronze badges 7

• Hmm, but if you wrap a tag (maybe a <div> or <span>) around the string... wouldn't you then be able to find the pixel width of that particular string by checking the <div> or <span> that surrounds the string? – summea Commented Feb 14, 2012 at 19:34
• But that would require it already being on the page. Is there a way to do this before putting it on the page? – hbhakhra Commented Feb 14, 2012 at 19:36
• Having an extra span on the page wouldn't hurt as long as it is hidden. – Alex Commented Feb 14, 2012 at 19:48
• @Alex. In some cases, a hidden element's width would be 0 regardless. – Quickredfox Commented Feb 14, 2012 at 20:25
• @Quickredfox. I know there are some problems with hidden elements. But couldn't you put a div inside another div with css-styles width:0, height:0 and overflow:hidden and get the actual width of the string from the inner div? – Alex Commented Feb 14, 2012 at 20:49

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 4

If you're wanting to set the <input> length to show all characters in the string, you can set it like so:

var myString = "abcdefg"; // this is what got input dynamically
var myInputElement = document.getElementById('someInput');
myInputElement.size = myString.length;

Since usually a good measure of characters are by em.

You can do this;

var element = Document.getElementById("ID");
element.style.length = element.value.length + " em";

You have to remember that before calculating the string's pixel width with regards to it's character count you have to somehow be aware of the metrics on the font used.

If then, you were to take the input string, wrap it in a <span>, embed it in the document, calculate the element's width, then remove the span and add the value to it's final destination you'd have a pretty decent projection of the intended width as long as your span has the same font style rules as the destination element.

If you want to get really fancy and technical about it, then the HTML 5 <canvas> tag is your friend.

A good article to better understand the plexity of font metrics in javascript which will also help you solve this: http://mudcu.be/journal/2011/01/html5-typographic-metrics/#measure

you can create an element and put some callback in it's load event

var span = $("<span/>").text("your input").load(function(e){
    console.log($(this).width());
});

this way you can get the current width. don't define any width for the span element and don't float.

本文标签： javascriptGet css width from a stringStack Overflow