Return to Answer

Neither Rune's nor Brain's was working for me in case when the element that was holding the text had fixed width. I did something similar to Okamera. It uses less selectors.

$.fn.textWidth = function(){   var html_calc = $('<span>' + $(this).html() + '</span>');   html_calc.css('font-size',$(this).css('font-size')).hide(); html_calc.prependTo('body');   var width = html_calc.width();   html_calc.remove();   return width;  } 

Neither Rune's nor Brain's was working for me in case when the element that was holding the text had fixed width. I did something similar to Okamera. It uses less selectors.

EDIT: It won't probably work for elements that uses relative font-size, as following code inserts htmlCalc element into body thus looses the information about parents relation.

$.fn.textWidth = function() { var htmlCalc = $('<span>' + this.html() + '</span>'); htmlCalc.css('font-size', this.css('font-size')) .hide()  .prependTo('body'); var width = htmlCalc.width(); htmlCalc.remove(); return width; }; 

Neither Rune's nor Brain's was working for me in case when the element that was holding the text had fixed width. I did something similar to Okamera. It uses less selectors.

$.fn.textWidth = function(){ var html_calc = $('<span style="display:none">' + $(this).html() + '</span>'); html_calc.prependTo('body'); var width = html_calc.width(); html_calc.remove(); return width; } 

Neither Rune's nor Brain's was working for me in case when the element that was holding the text had fixed width. I did something similar to Okamera. It uses less selectors.

$.fn.textWidth = function(){ var html_calc = $('<span>' + $(this).html() + '</span>'); html_calc.css('font-size',$(this).css('font-size')).hide(); html_calc.prependTo('body'); var width = html_calc.width(); html_calc.remove(); return width; } 

Neither Rune's nor Brain's was working for me in case when the element that was holding the text had fixed width. I did something similar to Okamera. It uses less selectors.

$.fn.textWidth = function(){ var html_calc = $('<span style="display:none">' + $(this).html() + '</span>'); html_calc.prependTo('body'); var width = $(html_calc).width(); html_calc.remove(); return width; } 

Neither Rune's nor Brain's was working for me in case when the element that was holding the text had fixed width. I did something similar to Okamera. It uses less selectors.

$.fn.textWidth = function(){ var html_calc = $('<span style="display:none">' + $(this).html() + '</span>'); html_calc.prependTo('body'); var width = html_calc.width(); html_calc.remove(); return width; }