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?

You will need to look in to a javascript/jquery solutions to achieve this. — WizardCoder, Sep 19 '17 at 20:11
@ChrisG Thanks for this! Unfortunately it doesn't work for multiline text.. — andreas, Sep 19 '17 at 20:37
Discovered a small bug; fixed: https://jsfiddle.net/khrismuc/oz10fayk/ — , Sep 19 '17 at 20:57

Dan Kreiger · Accepted Answer · 2017-09-19T23:55:19.980

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>

Nice, thanks for this solution! Since I don't want the text to be wrapped, I can simply do a second while: `while (span.width() > $(divEls[i]).width()) { span.css('font-size', fontSize--) }` — andreas, Sep 19 '17 at 22:00
Any chance to make this approach responsive? I.e. having a `.container` width of 100vw? — andreas, Sep 19 '17 at 22:48
Sure - here's a **[CodePen Demo](https://codepen.io/dankreiger5/pen/veGmqr)** using a responsive approach with the `.container` width at 100vw. I'm also using your snippet to reduce the font. I'll post the code above as well. — Dan Kreiger, Sep 19 '17 at 23:22

Scale texts of different lengths to fit container width

1 Answers1