Text Fill

by Génesis García Morilla

HTML

<div>The quick brown fox jumps over the lazy dog</div>

CSS

body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  background-color: darkseagreen;
  padding: 10px;
  width: 45vw;
  text-align: center;
}

JavaScript

const textFill = $e => $e.style.fontSize = `${innerWidth / $e.textContent.length}px`

const $div = document.querySelector('div')
onresize = () => textFill($div)

textFill($div)