<div class="text" contenteditable>
  Hexagon affogato literally, farm-to-table PBR&B bicycle rights tousled. Hexagon waistcoat humblebrag skateboard bitters plaid lo-fi gochujang. Offal godard iceland tonx praxis big mood try-hard cold-pressed williamsburg DSA. Lumbersexual ascot photo booth bruh af. Bicycle rights leggings vape, retro pinterest semiotics banjo tote bag.
</div>
@property --_x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0; 
}

@property --ch {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0; 
}

@keyframes x { to {--_x: 1} }

.text {
  --lh-min: 1.15;
  --lh-max: 1.5;
  --ch-min: 18;
  --ch-max: 60;
  --lh-delta: calc(var(--lh-max) - var(--lh-min));
  --ch-delta: calc(var(--ch-max) - var(--ch-min));
  --slope: calc(var(--ch-delta) / var(--lh-delta));
  --offset: calc(var(--ch-min) - (var(--slope) * var(--lh-min)));
  --lh: calc((var(--ch) - var(--offset)) / var(--slope));
  --ch: calc(1/(1 - var(--_x)));
  display: inline-block;
  overflow: auto;
  timeline-scope: --cx;
  animation: x linear;
  animation-timeline: --cx;
  animation-range: entry 100% exit 100%;
  
  line-height: clamp(
    var(--lh-min),
    var(--lh),
    var(--lh-max)
  );
  
  &::before {
    content: '';
    width: 1ch;
    display: block;
    view-timeline: --cx inline;
  }
}

.text:after {
  content: counter(ch) "ch";
  counter-reset: ch var(--ch);
  font-weight: bolder;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.