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

Question

我正在创建一个 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;
}

这就是我所拥有的：

我想要的是这样的：

标签： htmlcssflexboxfont-size

Answer 1

这篇文章在插件和其他方面给出了很多答案： 基于容器宽度的字体缩放

您必须确保您应用的任何内容都会根据高度而不是宽度更改字体大小！

而且我认为使用Danto所示的 SVG将适用于您的情况：

<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>