Calculate text width and height with JavaScript

By David Pratt / Tags: , , / 5 Comments / Published: 22-04-10

Occasionally when putting together an advanced layout it’s necessary to have a level of control over the UI that can’t be achieved with CSS alone.

One situation might be in displaying a place name. Say for instance that place name had to be rendered in block that has a width of 200px, with a height that can flex as necessary to accomodate the content. This won’t be a problem in 99.9% of situations, but what happens if the place name is Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch?! Yes this place does exist! In cases like this you might want to apply a special class name, or maybe dynamically adjust the font-size so that it fits within the allowed container. The consequences of not defending against this situation might be that the layout behaves unpredicatably, breaks, or perhaps some of the word could be hidden by the overflow property in the CSS being set to hidden or something.

So, should you find yourself in a situation where you need to measure the height and width of a text element, this code might help you:

HTML
<p id="place-name"> Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</p>
CSS
#place-name{
    position: absolute;
    height: auto;
    width: auto;
}
JavaScript
var oPlaceName = document.getElementById("place-name");
if (oPlaceName){
	var iHeight = oPlaceName.clientHeight + 1;
	var iWidth = oPlaceName.clientWidth + 1;
	if (iWidth > 200){
		//Deal with the long text.
	}
}

I have prepared a quick standalone example should you want to see this in action.

A place name might have been a bad example, but it could have quite easily have been any other type of field who’s length or height you might want explicit control over. Other applications of this that I can think of quickly could be adjusting the font-size of headings so that they never wrap, perhaps adjusting letter spacings so that they have aligned edges, or whatever else the designers .psd file shocks you with! With a clever implementation, this sort of thing could be achieved without the user even noticing, but that’s a job for someone else!

Category: Tech

Tags: , ,

Posted: on April 22nd, 2010 at 10:43 am.

Feeds: RSS 2.0

5 Responses to “Calculate text width and height with JavaScript”

Dinesh April 10th, 2011 at 9:15 am

It is a good explanation for what is was searching.

Jordan April 19th, 2011 at 8:05 pm

That’s pretty cool. Is there a way to figure out the actual height of a paragraph () that is wrapped several times in a div? What I’m trying to achieve is to calculate the height of a a fixed width div that will have an adjustable height. This height will depend upon how many times the text string wraps. Could you give me a pointer or two on how to find this height?

Donno March 21st, 2012 at 9:48 am

If The “place-name” changes dynamically will the height and width also change ? I Have a Problem My Text width does not seem to change ?

Donno March 21st, 2012 at 9:51 am

It Works Dynamically ! Found My Problem :-)

nzo December 1st, 2012 at 7:51 pm

thank you a lot for the script. I’ve discovered two additionnal functions: offsetHeight and offsetWidth ( from http://help.dottoro.com/ljfwvsrv.php ) which are good too.

Thank you

Leave a reply