Is it possible to adapt font size to div width with CSS?

Question

I have a div with 70% width, and here’s what I want to do:

• Put some words in that div
• Adapt font size so that those words occupy all div width

---

Is this possible with only css? Here is my code:

.parent {
  width:70%;
  height:auto;
  min-height:100px;
  background:red;
  font-size:10vw;
}

Please help me to change the font-size dynamically to the parent class
<hr>
<div class="parent">
  This Text
</div>

Note: the div size is responsive, this is important. Thanks in advance!

Solution 1

You just have to add display: inline; in your code

.parent {
  width: 70%;
  height: auto;
  min-height: 100px;
  background: red;
  font-size: 10vw;
  display: inline;
}

<div class="parent">
  This Text
</div>

Solution 2

Perhaps not quite what you're looking for, but something - You can make both the font and the element relative to view width.

p {
  font-size: 5vw;
  background-color: red;
  width: 50vw;
}

<p>
  I'm a P!
</p>