1

If the name is like "david" it comes within the allotted space.... but if the name is like "john pal abraham desouza" the allotted space increases automatically..

So i need to have the name occupied in the allotted space by auto resizing the font.. Suggest me a solution..

user174796
  • 31
  • 2
  • 2
    If you can only use HTML (or CSS) then you are out of luck. Can you use JavaScript? – Jan Hančič Dec 07 '09 at 14:03
  • what if they have "john pal abraham desouza the third and most righteous" Resizing your text to me sounds like a bad idea. If you started at 10pt with john where would the above name leave you 6pt. I am not sure most people could read it. – Kieran Dec 09 '09 at 23:51
  • possible duplicate of [resize font to fit in a div (on one line)](http://stackoverflow.com/questions/3401136/resize-font-to-fit-in-a-div-on-one-line) – Robert Koritnik Apr 13 '11 at 23:08

2 Answers2

1

You can use jQuery to check the length of the string and guess at a suitable font-size, check the rendered width and then adjust again if necessary.

As @Kieran says above, it's not going to be fool-proof - if a name is very long the font-size will be really small. Also, if there are no spaces in a long name, then the text won't wrap over two lines. However, that's a bit of an edge case.

Dan Blows
  • 20,846
  • 10
  • 65
  • 96
1

Use a hidden dummy div to do the checking

By using a hidden (using visibility: hidden) and absolutely positioned div with same font CSS settings and copied content, you can easily change font sizes and check div width. When it exceeds certain size you can use the last valid value on your original div. This will avoid visual change of your fonts and content repositioning and recalculation so it will work faster. This will also avoid problems with long non-spaced words.

The same question has already been asked and answered.

Community
  • 1
  • 1
Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404