Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

How to re-size text to fill a fixed size HTML container?

Damian99Damian99 USAPosts: 116Member

I have to show a variable length text in a fixed size div. How can I achieve this?

Comments

  • unblockableunblockable NigeriaPosts: 3Member
    edited March 3

    This code works, but I am using a little jQuery, I hope this helps in some way...

    <style type="text/css">
        #container {
            height:100px;
            background-color:#eeeeee;
            text-align:center;
            font-family:Myriad Pro;
        }
    <style>
    <div id="container">01234567890123456789</div>
    <script type="text/javascript">
        $(document).ready(function()
        {
            var w = parseInt($("#container").width());
            var l = parseInt($("#container").html().length);
            var fontSize = ( (w / l) *2 ) - 2;
            fontSize = fontSize+'px';
            $("#container").css('font-size', fontSize);
        });
    </script>
    
Sign In or Register to comment.