如何调整段落的字体大小，以填补Flexbox的容器内的物品高度？

Question

我创建与包含文本但不是所有的文字都相同lenght若干项的Flexbox的容器。我要自动调整文本的字体大小，满足每一Flexbox的项目的高度。

我曾试图设置字体大小与VH和其他单位，并试图JS插件FitText但它使所有的文本更大。

这里是我的代码：

<div style="display:flex;flex-wrap:wrap;justify-content:space-between">
   <blockquote  class="articulo">
       <p>Aprendizaje y práctica de la conciencia plena en estudiantes de bachillerato para potenciar la relajación y la autoeficacia en el rendimiento escolar</p>
       <small><cite">universitas psychologica</cite></small>
   </blockquote>
   <blockquote  class="articulo">
       <p>Prevalencia de la depresión en España: Análisis de los últimos 15 años.</p>
       <small><cite">universitas psychologica</cite></small>
   </blockquote>
   <blockquote  class="articulo">
       <p>Instrumentos para la evaluación de la sobrecarga del cuidador familiar de personas con demencia.</p>
       <small><cite>universitas psychologica</cite></small>
   </blockquote>
   <blockquote  class="articulo">
       <p>Impulsividad y consumo de alcohol y tabaco en adolescentes.</p>      
       <small><cite>universitas psychologica</cite></small>
   </blockquote>
</div>

CSS：

.articulo{
    width:30%;
    margin-bottom:20px;
    border-left:3px solid #92c500;
}

.articulo cite{
    text-transform: uppercase;
}

这是我有：

而这样的事情是我想要的东西：

Answer 1

如何设置字体大小16px的默认，然后使用JavaScript或jQuery和获取文本的长度，然后检查长度<（NUM），设置18像素的字体，例如！

Answer 2

这篇文章给出了不少答案，插件和其他方面：Font scaling based on width of container

你必须确保你在应用方面的改变任何字体大小的高度和宽度不！

我认为，使用SVG如图这样Danto会为您的工作情况：

<div style="height: 60px;">  
  <svg width="100%" height="100%" viewBox="0 -200 1000 300"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text font-size="300" fill="black">Text</text>
  </svg>
</div>