Make font smaller if there is big text

Issue

I have div and within that div text is displayed

<div class="td">
  <div class="title main-color">test text</div>
</div>

but if there is big text it goes outside of div. I want to make that if there's big text font to become smaller. How can I achieve that?

JSFIDDLE is here

P.S. I don't want div to grow in height

Solution

Try this

.main-color {
  opacity: 0.6;
  background: #ffffff;
}

.title {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 470px;
  border-radius: 20px;
  float: left;
  line-height: 30px;
  font-size: 26px;
}

.td {
  margin: 60px 0;
  height: 100px;
  width: 100%;
}

<div class="td">
    <div class="title main-color">test text</div>
    </div>
    <div class="td">
    <div class="title main-color">test text is bigger now, goes outside of div and doesn't appear</div>
</div>

Live demo here: https://jsfiddle.net/grinmax_/zjaq98Ln/11/

Answered By - grinmax