Skip to content

Instantly share code, notes, and snippets.

@steveosoule

steveosoule/javascript-dynamically-fit-text-in-div.html

Created November 14, 2012 18:22
Show Gist options
  • Save steveosoule/4073826 to your computer and use it in GitHub Desktop.
Save steveosoule/4073826 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript Dynmaically Fit Text in Div
Raw
javascript-dynamically-fit-text-in-div.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
;(function($) {
$.fn.textfill = function(options) {
var fontSize = options.maxFontPixels;
var ourText = $('span:visible:first', this);
var maxHeight = $(this).height();
var maxWidth = $(this).width();
var textHeight;
var textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
return this;
}
})(jQuery);
$(document).ready(function() {
$('.jtextfill').textfill({ maxFontPixels: 1000 });
});
</script>
</head>
<body>
<div class='jtextfill' style='width:700px;height:600px;'>
<span>My Text</span>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment