resize font to fit in a div (on one line)

by

CSS no, Javascript yes

There’s no way you could do this using CSS, but you can do it in javascript/jQuery. To help you with your pseudo code because you already know what to do. It’s just that you don’t know how to detect excess width.

The best way would be to have a DIV with following (at least) style:

position: absolute;
visibility: hidden;
white-space: nowrap;
font-family: /* same as your title's */

then copy your text to it and set some starting font size. Then you can iterate through your while loop and stop when div’s width is appropriate. Then set calculated font size to your original title.

This way this checking will be hidden from user’s eyes and it will therefore work faster as well.

BTW: This is the usual way how auto growing textarea scripts work. They use dummy divs with same style settings as the original text area and adjust area’s height as the user types in text. So Text area can be quite small at first but if user types in lots of text it will auto grow to accommodate content.

While loop optimization

You could optimize your while loop to decrease the number of iterations considerably by doing this:

  1. Set a starting font size.
  2. get test DIV’s width.
  3. calculate width factor between orig_div and test_div.
  4. adjust font size by this factor rather than increase/decrease by one unit
  5. test test_div width

More Related Contents:

  1. How make my CSS responsive using Bootstrap 3.1
  2. How to change the element of another div by clicking and hovering on an element of a different div
  3. Hide/Show div on specific page with jquery
  4. Issue with a design when content increase [closed]
  5. How to change color of SVG image using CSS (jQuery SVG image replacement)?
  6. Firing events on CSS class changes in jQuery
  7. Downloading jQuery UI CSS from Google’s CDN
  8. Create a CSS rule / class with jQuery at runtime
  9. How do I get background image size in jQuery?
  10. How to automatically change the text size inside a div?
  11. Is it possible to use jQuery to get the width of an element in percent or pixels, based on what the developer specified with CSS?
  12. jquery IE Fadein and Fadeout Opacity
  13. jQuery CSS – Write into the -tag
  14. Remove CSS from a Div using JQuery
  15. Correct way to animate box-shadow with jQuery
  16. Changing Body Font-Size based on Font-Family with jQuery
  17. How to make Bootstrap carousel slider use mobile left/right swipe
  18. How to expand ‘select’ option width after the user wants to select an option
  19. Get the value of -webkit-transform of an element with jquery
  20. How do you select elements based on their style?
  21. jQuery/CSS: line-height of “normal” == ?px
  22. How to hide/remove a DIV when empty
  23. Trying to make multiple background images cycle through a slideshow with CSS and JQUERY
  24. Get *all* CSS attributes with jQuery
  25. Set background colour of select to selected option in JQuery
  26. Change the body background image with fade effect in jquery
  27. Weird IE8 layout glitch – why does the body background disappear?
  28. jQuery css gradient
  29. Remove vertical lines in jqGrid
  30. Removing multiple classes (jQuery)

Leave a Comment