Scale texts of different lengths to fit container width

Question

I have an element with a certain size, that contains texts of single or multiple lines in different lengths. Now I want to scale the font-size of these texts in such a way, that the longest line of the text fits perfectly into the containers width.

As an example, I want this markup

 .container { width: 400px; border: 1px solid green; padding: .5em; } .container>div { border: 1px dotted gray; }

 <div class="container"> <div>Lorem ipsum dolor sit amet.</div> <div>Lorem ipsum.</div> <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt<br />ut labore et dolore magna aliquyam erat, sed diam voluptua.</div> </div>

produce something like this:

I tried using relative font sizing unit , but always ended up adjusting the font-size of every child element manually, which isn't an option.

Also this post about dynamically scaling text to fit the viewport doesn't help, since I have multiple different text lengths.

Can this be solved with CSS? Or do I have to take a Javascript approach where I count the letters and adjust the font-size accordingly? But what if I use a font where letters have different sizes?

Answer 1

How about this?

 $(document).ready(function() { var divEls = $('.container div'); for(var i=0; i<divEls.length;i++){ var span = $(divEls[i]).find('span'); var fontSize = 16; while (span.width() < $(divEls[i]).width()) { span.css('font-size', fontSize++) } // wrap if span exceeds div width if (span.width() > $(divEls[i]).width()) { span.css('white-space', 'pre-wrap'); } } });

 .container { width: 400px; border: 1px solid green; padding: .5em; } .container>div { border: 1px dotted gray; white-space: pre; }

 <div class="container"> <div><span>Lorem ipsum dolor sit amet.</span></div> <div><span>Lorem ipsum.</span></div> <div><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt<br />ut labore et dolore magna aliquyam erat, sed diam voluptua .</span></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can also try an ES6 solution like this CodePen Demo

---

Update - per the comment below, here is a reponsive solution (also see this CodePen Demo ):

 function resizeFont() { var divEls = $(".container div"); for (var i = 0; i < divEls.length; i++) { var span = $(divEls[i]).find("span"); var fontSize = (span.css("font-size").match(/\\d+/)[0]); while (span.width() < $(divEls[i]).width()) { span.css("font-size", fontSize++); } while (span.width() > $(divEls[i]).width()) { span.css("font-size", fontSize--); } } } $(document).ready(function() { resizeFont(); $(window).on("resize", resizeFont); });

 body { margin: 0; } .container { max-width: 100vw; border: 1px solid green; padding: .5em; } .container>div { border: 1px dotted gray; white-space: pre; }

 <div class="container"> <div><span>Lorem ipsum dolor sit amet.</span></div> <div><span>Lorem ipsum.</span></div> <div><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt<br />ut labore et dolore magna aliquyam erat, sed diam voluptua .</span></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>