CodePen Embed - Responsive Text Length

<h1>Responsive Text Length</h1>
<h2>Shrinking Text Based on Character Count</h2>
<h2>200 Characters</h2>
<p>MMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMX</p>
<h2>250 Characters</h2>
<p>MMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMX</p>
<h2>300 Characters</h2>
<p>MMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMX</p>
<h2>350 Characters</h2>
<p>MMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMXMMMMX</p>

p {
  word-break:break-all;
}
@element 'p' {
  $this:after {
    content: 'eval('innerHTML.length') characters and eval('clientHeight')px';
    display: block;
  }
}

p {
  font-size: 12pt;
}
@element 'p' and (min-characters: 250){
  $this {
    font-size: eval("100-(innerHTML.length-250)/(clientWidth/10)")%;
  }
}

This Pen is owned by Tommy Hodgins on CodePen.

See more by @tomhodgins on CodePen

External CSS

External JavaScript