Question

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?

Answer 1

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'))));
       }
    });
});