Get css width from a string

Question

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)

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
– 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
– 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
– Alex, Commented Feb 14, 2012 at 19:48
@Alex. In some cases, a hidden element's width would be 0 regardless. — Quickredfox
– 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
– Alex, Commented Feb 14, 2012 at 20:49

Jonathan M · Accepted Answer · 2012-02-14 19:43:25Z

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;

answered Feb 14, 2012 at 19:43

Jonathan M

17.5k9 gold badges61 silver badges95 bronze badges

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

Comments

Churk · Accepted Answer · 2012-02-14 19:36:47Z

1

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";

answered Feb 14, 2012 at 19:36

Churk

4,6475 gold badges25 silver badges40 bronze badges

2 Comments

Jonathan M Over a year ago

document is not capitalized.

Jonathan M Over a year ago

I've never used the style.length. Can you point me to some documentation?

Quickredfox · Accepted Answer · 2012-02-14 20:22:33Z

1

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 complexity of font metrics in javascript which will also help you solve this: http://mudcu.be/journal/2011/01/html5-typographic-metrics/#measure

answered Feb 14, 2012 at 20:22

Quickredfox

1,46614 silver badges20 bronze badges

2 Comments

Brice Coustillas Over a year ago

It all boils down to font metrics, indeed. I cannot figure out why this answer has not gotten any up-votes. Actually, I understand 'CSS width' in the original question as: 'width by pixels' (or em's or anything else).

Quickredfox Over a year ago

Because the original question is badly titled. I did answer the question asked, but not the question meant (apparently, seeing as chosen answer has nothing to do with CSS)

eyurdakul · Accepted Answer · 2012-02-14 19:47:14Z

0

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.

answered Feb 14, 2012 at 19:47

eyurdakul

9122 gold badges12 silver badges29 bronze badges

Collectives™ on Stack Overflow

Get css width from a string

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related