Responsive text inside a container

Question

According to this code:

HTML

.conteudo-wrapper {
  padding-left: 280px;
}

.card {
  border-radius: 4px;
  display: block;
  margin-bottom: 25px;
  overflow: hidden;
  color: #fff;
  height: 120px;
  position: relative
}

.card:hover,
.card:active,
.card:focus,
.card:visited {
  color: #fff;
  text-decoration: none;
}

.card-roxo {
  background-color: #8E44AD;
}

.card-verde {
  background-color: #32C5D2;
}

.card-azul {
  background-color: #3598DC;
}

.card-vermelho {
  background-color: #E7505A;
}

.card-amarelo {
  background-color: #FBBE27
}

.card .visual {
  display: block;
  float: left;
  font-size: 35px;
  height: 80px;
  line-height: 35px;
  padding-left: 15px;
  padding-top: 35px;
  width: 80px;
}

.card .visual i {
  color: #ffffff;
  opacity: 0.1;
  font-size: 110px;
  line-height: 110px;
  margin-left: -35px;
}

.card .detalhe {
  padding-right: 15px;
  position: absolute;
  right: 15px;
}

.card .detalhe .numero {
  font-size: 34px;
  font-weight: 300;
  letter-spacing: -1px;
  line-height: 36px;
  margin-bottom: 0;
  padding-top: 25px;
  text-align: right;
}

.card .detalhe .descricao {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
}

.card .detalhe .data-referencia {
  font-size: 12px;
  margin-top: 8px;
  text-align: right;
}

.card .detalhe .nome-link {
  font-size: 18px;
  font-weight: bold;
  margin-top: 40px;
}

<div class="conteudo-wrapper ">

  <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
    <a href="javascript:void(0);" class="card card-roxo">
      <div class="visual">
        <i class="fa fa-bar-chart-o"></i>
      </div>
      <div class="detalhe arrecadacao-liquida">
        <div class="numero">-184 mi<span class="contador" id="contadorArrecadacaoLiquida"></span></div>
        <div class="descricao">Retorno dos Financiamentos</div>
        <div class="data-referencia">Posição: 2017</div>
      </div>
    </a>
  </div>

  <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
    <a href="javascript:void(0);" class="card card-verde">
      <div class="visual">
        <i class="fa fa-bar-chart-o"></i>
      </div>
      <div class="detalhe contratacoes">
        <div class="numero"><span class="contador" id="contadorContratacoes"></span></div>
        <div class="descricao"></div>
        <div class="data-referencia"></div>
      </div>
    </a>
  </div>

  <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
    <a href="javascript:void(0);" class="card card-amarelo">
      <div class="visual">
        <i class="fa fa-bar-chart-o"></i>
      </div>
      <div class="detalhe retorno-financiamentos">
        <div class="numero"><span class="contador" id="contadorRetornoFinanciamentos"></span></div>
        <div class="descricao"></div>
        <div class="data-referencia"></div>
      </div>
    </a>
  </div>

  <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
    <a href="javascript:void(0);" class="card card-vermelho">
      <div class="visual">
        <i class="fa fa-bar-chart-o"></i>
      </div>
      <div class="detalhe taxa-administracao">
        <div class="numero"><span class="contador" id="contadorTaxaAdministracao"></span></div>
        <div class="descricao"></div>
        <div class="data-referencia"></div>
      </div>
    </a>
  </div>
</div>

See also this Fiddle

When there are 4 cards in the same line (you have to drag the splitter), the text of the description gets bigger than the limit of the card and truncates.

To solve the problem, I tried to use Viewport Percentage Lengths, but when the device resolution is lower, the cards get bigger because of the bootstrap grid system and the font becomes too small. Taking into account that the text of this description is dynamic, I need to create a system for this text to be responsive inside the container, that is, when the text is larger than the container the font decreases until it fits.

How can I solve this problem? Is there a solution just using css?