How can I have text resize based on the width of the preceding div element using CSS?

Question

I have a label I'm attempting to generate. It has the following structure.

  .name-box { width: 400px; background-color: #efefef; border: 1px solid #000; overflow: hidden; white-space: nowrap; } .last-name { font-size: 26px; display:inline; overflow: hidden;} .first-name { display:inline; overflow: hidden;} 

  <div class="name-box"> <div class="last-name">McDonald-OrAReallySuperDuperLongLastName</div> <div class="first-name">David</div> </div> 

What I'm wanting to do is change the text size of the first name, based on the length of the last name. If the name is "Venckus-Stringfellow" and I only have a little bit of space left I'd like the text size of the first name to be around 7px . But if the last name is "Le", then I'd want the first name to have a text size of 26px -- granted that having a text size of 26px still allows the first name to fit on the 600px that my div has to fill the label. How can I do this with HTML/CSS (if I MUST use Javascript then that's fine, was trying to avoid it though) ?

Answer 1

Javascript that uses the length of the last name in a mathematical equation to set the first names size. This is a very simple example and you'd need to change it if you wanted it to be exponential and you should probably set high and low bounds that it can't go below.

 var lastNameText = document.querySelector('.last-name').textContent; var firstName = document.querySelector('.first-name'); firstName.style.fontSize = (120 / lastNameText.length) + "px"; 

 .name-box { width: 600px; } .last-name { font-size: 26px; } .first-name: { font-size: 26px; } 

 <div class="name-box"> <div class="last-name">McDonald</div> <div class="first-name">David</div> </div> 

Answer 2

You're going to need javascript here, unfortunately. You can get close using viewport percentages , but that applies to the whole viewport. And it would only be for one container, not a preceding container. What you are going to need to do is create an algorithm that updates the font sizes, and run it everytime you load HTML/text into those div 's.

Something like this should get you started:

function loadNames(var firstName, var lastName) {
    //GET THE LENGTH OF THE LASTNAME STRING
    var len = lastName.length;
    var factor = .7; //CUSTOMIZE THIS TO DO YOUR SIZING BASED ON THE FONT
    var fontSize = Math.ceil(factor * len); //GET THE NEW FONT SIZE, BASED ON THE LENGTH AND FACTOR, AND ROUNDED UP
    //SET THE TEXT OF THE NAMES
    $('firstName').Text(firstName);
    $('lastName').Text(lastName);
    //SET THE FONT SIZES
    $('firstName').css({ 'font-size': fontSize + 'px;' });
    $('lastName').css({ 'font-size': fontSize + 'px;' });
}

Answer 3

CSS solution unfortunately is not possible. It's not possible to select partial text inputs, and there's some calculation required that cannot be done with CSS at this point, in this age.

But javascript.. Were you looking for something like this OP?

 $(document).on("ready", function(){ var ratio = 20; $(".name").keydown(function(){ var input_length = $(this).val().length / ratio; var new_size = (2 - input_length < 1 ? 1 : 2 - input_length); $(this).css("font-size", new_size+"em"); }); }); 

 input { width: 40em; margin: 0 auto; display: block; padding: 15px; } .main-wrapper { width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main-wrapper"> <input class="name" type="text" placeholder="Enter name" /> </div> 

Answer 4

This is another approach how You could achieve the result. Maybe it's possible to do not use table at all but each div should use display:inline-block; property.

 $scalingL = $('.last-name').width(); $scalingF = $('.first-name').width(); $('.first-name').css('font-size',($scalingL / $scalingF * 26)); 

 .name-box { width: 600px; background-color: #efefef; border: 1px solid #000; overflow: hidden; white-space: nowrap; } .last-name { font-size: 26px; overflow: hidden; display:inline-block;} .first-name { font-size: 26px; display:inline-block;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="name-box"> <table> <tr> <td> <div class="last-name">McDonald-OrAReallySuperDuperLongLastName</div> </td> </tr> </tr> <td> <div class="first-name">Something</div> </td> </tr> </table> </div> 

Answer 5

Try this:
            <style type="text/css">


                .name-box{
                    width:auto;
                    overflow:auto;

                }

                #first-name{

                    display:inline-block;
                    width:auto;
                    clear:both;
                    float:left;
                    font-size:1px;

                    }

                    #last-name {

                    display:inline-block;
                    width:auto;
                    clear:both;
                    float:left;
                    font-size:26px;
                }

                </style>
                <div class="name-box">
                    <div id="last-name">McDonalds</div>
                    <div id="first-name">David</div>
                </div>

                <script type="text/javascript">
                var ln = document.getElementById("last-name");
                var fn = document.getElementById("first-name"); 



                for ( i = 1; ln.offsetWidth>fn.offsetWidth; i+=.5)
                {

                    fn.style.fontSize=(i)+"px";
                }


                </script>

 <style type="text/css"> .name-box{ width:auto; overflow:auto; } #first-name{ display:inline-block; width:auto; clear:both; float:left; font-size:1px; } #last-name { display:inline-block; width:auto; clear:both; float:left; font-size:26px; } </style> <div class="name-box"> <div id="last-name">McDonalds</div> <div id="first-name">David</div> </div> <script type="text/javascript"> var ln = document.getElementById("last-name"); var fn = document.getElementById("first-name"); for ( i = 1; ln.offsetWidth>fn.offsetWidth; i+=.5) { fn.style.fontSize=(i)+"px"; } </script>