Size text so it scales to fit a width?

Question

Is it possible to have the font size adjust automatically to scale a dynamic line so that it is always 100% of it's container, no matter what text you have?

Example and codepen:

html

<body>
  <div class="container">
    <div class="text-block">
      <h1>Scale to 100% of text-block without wrapping</h1>
    </div>

    <h3>Desired outcome:</h3>
    <div class="text-block2">
      <h1>Scale to 100% of text-block without wrapping</h1>
    </div>
  </div>
</body>

css

.text-block {
  border: 2px solid #000;
  width: 400px;
  padding: 20px 30px;
  margin: 50px auto;
}
.text-block2 {
  border: 2px solid #000;
  width: 400px;
  padding: 20px 30px;
  margin: 20px auto;
}
h1 {
  font-family: arial, sans-serif;
}
.text-block2 h1 {
  font-size: 18.65px;
}
h3 {
  font-weight: 500;
  font-family: arial, sans-serif;
  text-align: center;
}

https://codepen.io/sharpdesigner/pen/NYpKJm

This is not a duplicate of the linked questions. I am not asking how to scale font-size based on container width, I am asking how to scale the entire h1 text so that it doesn't wrap.

The best answer I found is from the comments and it is using FitText. Codepen updated with working example.

Have you tried searching for "text fit container" for example? [FitText](http://fittextjs.com/) does this (but with jQuery). — chriskirknielsen, Mar 20 '18 at 15:27
so you want to avoid line breaks and make the font size smaller instead? — messerbill, Mar 20 '18 at 15:28
https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container — , Mar 20 '18 at 15:28

Size text so it scales to fit a width?

0 Answers0