如何调整段落的字体大小以填充flexbox容器内的项目高度？

Question

我正在创建一个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），例如设置18px字体！

Answer 2

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

您必须确保应用的所有内容都会更改字体大小，而不是高度！

我认为使用Danto所示的SVG可以解决您的问题：

var properties = ["name", "sex", "location"];
o={};
for (var i=0, l=properties.length; i<l; i++) {
    Object.defineProperty(o, properties[i],{
        get: function () {return this["_"+properties[i]];},
        set: function(val){
            this["_"+properties[i]] = val;
        },
        enumerable: true,
        configurable: true
    });     
}

o.name = "something";
console.log(o.name);