Pure CSS to make font-size responsive based on dynamic amount of characters

by

I know that this could be solved fairly easily with Javascript, but I’m only interested in a pure CSS solution.

I want a way to dynamically resize text so that it always fits into a fixed div. Here is the sample markup:

<div style="width: 200px; height: 1em; overflow: hidden;">
  <p>Some sample dynamic amount of text here</p>
</div>

I was thinking that maybe this could be possible by specifying the width of the container in ems, and getting the font-size to inherit that value?

15 Answers
15

Leave a Comment