Posted By

Narthur on 11/01/11

Tagged

Versions (?)

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

Statistics

Viewed 717 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.

Highlighted TextExpand

$.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;
};

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);
});

URL: http://jsfiddle.net/mfJPm/5/

Report this snippet Tweet