Scale texts of different lengths to fit container width

问题

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?

回答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>

来源：https://stackoverflow.com/questions/46308798/scale-texts-of-different-lengths-to-fit-container-width

标签

javascript

html

css

font-size