1

I have a page in which I'm reading names dynamically into a content area, in a certain displayed fashion. We have a few people whose names are extremely long, some names are 25 characters long, while most are around 12-13. How can I resize the text that I put into the div in an as-needed way?

Vap0r
  • 2,588
  • 3
  • 22
  • 35
  • A `div` will automatically take up as much space as is needed. Can you be more clear what the problem is? – Amy B May 24 '11 at 16:13
  • @Coronatus The way I understand the OP, the div's size is fixed and the text needs to be made fit. – Johannes Pille May 24 '11 at 16:17
  • I can't take a screenshot as personal information is involved, but I'll make a small [mock-up](http://vapor.ne8us.com/ahhhhhhhhhhyeah.png) of what I'm trying to do... – Vap0r May 24 '11 at 16:23
  • possible duplicate of [Auto-size dynamic text to fill fixed size container.](http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container) – Jeremy May 24 '11 at 16:30
  • As I'm dealing with a large amount of data, I decided to just do an `overflow-x: hidden` on all the data, as the efficiency costs of running that operation on so many records could be significant. – Vap0r May 24 '11 at 21:47

1 Answers1

0

Set the font size according to the text length. You did not post any code so I can only assume how your HTML may look like.

<div id="names" style="width: 140px; border: 1px solid black; overflow:hidden">
    <div style="white-space: nowrap">Some Name</div>
    <div style="white-space: nowrap">Some Very Very Long Name</div>
</div>

This could be the JavaScript using jQuery.

$(function() {
    $('#names div').each( function(idx, item) {
       if( $(this).width() > $(this).parent().width() ) {
           $(this).css('font-size', Math.floor($(this).parent().width() / $(this).width() * parseInt($(this).css('font-size'))));
       }
    });
});
DanielB
  • 19,910
  • 2
  • 44
  • 50