Posted By

Narthur on 11/01/11

Tagged

Versions (?)

Last Edited at 11/01/11 09:37am

Statistics

Viewed 882 times

Favorited by 0 user(s)

Related snippets

jQuery Text Scale to Element Size Script

/ Published in: jQuery

jQuery to set the width of some text to the width of a given element.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

$.fn.boxWidth = function(){
  var sensor = $('<div />').css({margin: 0, padding: 0});
  $(this).append(sensor);
  var width = sensor.width();
  sensor.remove();
  return width;
};
 
$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>'
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};
 
function scaleText(textTarget, widthTarget) {
    var textWidth = textTarget.textWidth();
    var boxWidth = widthTarget.boxWidth();
    var fontSize = .1;
    while (textWidth > boxWidth) {
        fontSize -= .1;
        textTarget.css('font-size', fontSize + 'em');
        textWidth = textTarget.textWidth();
        boxWidth = widthTarget.boxWidth();
    }
    while (textWidth < boxWidth) {
        fontSize += .1;
        textTarget.css('font-size', fontSize + 'em');
        textWidth = textTarget.textWidth();
        boxWidth = widthTarget.boxWidth();
    }
}
 
var textTarget = $('p'); // replace with the element containing the text you want to resize
var widthTarget = $('p'); // replace with the element whose width you want to match
 
$('document').ready(function() {
    scaleText(textTarget, widthTarget);
});
 
$(window).resize(function() {
    scaleText(textTarget, widthTarget);
});