JavaScript Scale Text to Fit in Fixed Div

by

This is somewhat of a hack, but will do what you want.

<div id="hidden-resizer" style="visibility: hidden"></div>

Place this at the bottom of your page, where it will not be moving other elements on the page.

Then do this:

var size;
var desired_width = 50;
var resizer = $("#hidden-resizer");

resizer.html("This is the text I want to resize.");

while(resizer.width() > desired_width) {
  size = parseInt(resizer.css("font-size"), 10);
  resizer.css("font-size", size - 1);
}

$("#target-location").css("font-size", size).html(resizer.html());

More Related Contents:

  1. Finding line-wraps
  2. jQuery .animate function not responding properly
  3. Reloading a single div in an html page [closed]
  4. How to decode HTML entities using jQuery?
  5. Reload an iframe with jQuery
  6. jQuery click not working for dynamically created items [duplicate]
  7. Stop setInterval
  8. Creating a jQuery object from a big HTML-string
  9. How to format/tidy/beautify in JavaScript
  10. How to blur the div element?
  11. Prevent form submission with enter key
  12. How to get html elements from an object tag?
  13. focus doesn’t work in IE
  14. javascript: detect scroll end
  15. Access event to call preventdefault from custom function originating from onclick attribute of tag
  16. get a list of all folders in directory [closed]
  17. Is it OK to add your own attributes to HTML elements? [duplicate]
  18. Scale a div to fit in window but preserve aspect ratio
  19. How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?
  20. Submit form after calling e.preventDefault()
  21. jQuery in Chrome returns “block” instead of “inline”
  22. Close a div by clicking outside
  23. Change form values after submit button pressed
  24. JavaScript on the bottom of the page?
  25. How to write into a file (in user directory) using JavaScript?
  26. ToggleClass animate jQuery?
  27. How can I dynamically highlight strings on a web page?
  28. Changing cursor to waiting in javascript/jquery
  29. Returning value from confirmation dialog using JQuery UI dialog
  30. How can I calculate the difference between two times that are in 24 hour format?

Leave a Comment