how to make text width fit equally in any browser? - html

Question

Is there some kind of a trick to make font size take up the same amount of width regardless of which browser is used? (I use pixels for font size, but I'm not sure how relevant that is to this question.)
Normally, if I have a line of text on my site that I want to only take up one line and not drop down to a second, I have to make sure the text that I write is short enough to fit as one line within the allotted space in all the main browsers. For instance, I might write some text within a div (that also has a specified width in pixels) that comes out as one line on firefox, safari, etc., but then when I go to check ie8, for some reason with the way it is displayed, it didn't have room for that last word and dropped that word down to the beginning of a second line. I was wondering if there was some way to make the text take up the same amount of room in terms of width no matter what. Is there some kind of simple solution here that I'm missing?
As I had said, I use pixels for font size, and I've been researching using other units of measurement, but to my understanding so far, using something else such as em's for font-size wouldn't really be the answer to this since they are basically an abstraction of pixels. Even if there was a way to do it with a different unit of measurement, I'd be interested to know if there is a a solution to this that would allow me to keep pixels, since that is just my preferred unit of measurement.

Answer 1

Different browsers and OSs have slightly different font handling, so it is really difficult to accurately anticipate these sorts of things. What I do is write a little jQuery function that increases the size of the font in a container until just before it wraps, fitting the container and not wrapping as a result. It generally flickers on load in IE but it is not noticeable on normal browsers. You can see it in action in the links attached (check out name of the market):
http://www.hdradioalliance.com/station_guides/widget.php?id=77
http://www.hdradioalliance.com/station_guides/widget.php?id=21
http://www.hdradioalliance.com/station_guides/widget.php?id=61
Feel free to recycle the code if it fits your needs.
Edit: actually, that particular bit of code shrinks the font until its container is one line tall—rather than what I said, which is the other way around. I've done it both ways tho. Here it is:
$(document).ready(function(){
var headingSize = 1;
while($('#headingSling h1 span').height() > 34 && parseInt($('#headingSling h1 span').css('font-size').replace(/\D\./g,'')) > 10){
headingSize -= 0.01;
$('#headingSling h1 span').css('font-size', headingSize+'em');
}
});