<p class="fit-to-width" contenteditable="">
  <span>IN THIS HOUSE WE BELIEVE</span>
  <span>TABS VS SPACES IS MOSTLY A BORING DEBATE</span>
  <span>WHAT PEOPLE WANT IS CONSISTENCY</span>
  <span>WHICH IS PRETTY EASY THESE DAYS</span>
  <span>CONSIDERING PRETTIER EXISTS</span>
  <span>AND STANDARDS LIKE .EDITORCONFIG</span>
  <span>BECAUSE THE DX DOESN’T MATTER, YOU SHOULD HAVE A PREFERENCE FOR TABS</span>
  <span>BECAUSE THEY ARE A BIT MORE ACCESSIBLE</span>
  <span>BUT REALLY EVERY LANGUAGE SHOULD HAVE GOFMT LIKE GO HAS</span>
</p>

/* CSS Trick = https://kizu.dev/fit-to-width-text/ */

@supports (animation-range: entry-crossing) {
  .fit-to-width {
    margin-block-start: 0;
    max-width: 90vw;
    font-size: 10rem; /* max-font-size */
    overflow: hidden;
    & > * {
      inline-size: max-content;
      line-height: 1.1;
      transform-origin: 0 0;
      animation: apply-text-ratio linear;
      animation-timeline: view(inline);
      animation-range: entry-crossing;
      display: block;
    }
  }
}

@keyframes apply-text-ratio {
  from {
    scale: 0;
    margin-block-end: -1lh;
  }
}

.fit-to-width {
  :nth-child(2) {
    color: oklch(58% 47% 26deg);
    font-variation-settings: "wght" 900, "wdth" 130;
  }
  :nth-child(3) {
    color: oklch(75% 32% 74deg);
    font-variation-settings: "wght" 200, "wdth" 100;
  }
  :nth-child(4) {
    color: oklch(90% 45% 106deg);
    font-variation-settings: "wght" 50, "wdth" 70;
  }
  :nth-child(5) {
    color: oklch(67% 32% 234deg);
    font-variation-settings: "wght" 900, "wdth" 130;
  }
  :nth-child(6) {
    color: oklch(62% 45% 141deg);
    font-variation-settings: "wght" 600, "wdth" 250;
  }
  :nth-child(7) {
    color: oklch(52% 49% 323deg);
    font-variation-settings: "wght" 400, "wdth" 100;
  }
  :nth-child(8) {
    color: oklch(52% 49% 323deg);
    font-variation-settings: "wght" 900, "wdth" 130;
  }
  :nth-child(9) {
    color: oklch(79% 0% 68deg);
  }

  > * {
    display: block;
  }
}

html {
  background: black;
  color: white;
  font-family: system-ui, sans-serif;
  overflow: clip;
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}