1

I'm creating a flexbox container with several items that contain text but not all texts have same lenght. I want to resize automatically the font size of text for fill the height of every flexbox item.

I have tried to set font-size with vh and another units and tried the js plugin FitText but it make all texts bigger.

Here is my code:

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

This is what I have:

what I have

and something like this is what I want:

what I want

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Juan Lopez
  • 361
  • 1
  • 3
  • 16

2 Answers2

0

This post gives quite a few answers, in terms of plugins and others: Font scaling based on width of container

you'll have to make sure whatever you apply changes font size in regards to height and not width!

And I think using SVG as shown by Danto like this would work for your case:

<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>
AkrisManta
  • 1
  • 2
-1

How about set font size 16px as default then use JavaScript or jquery and get the text length ,then check if length is < (num),set 18px font for example!

S_A_Gh
  • 55
  • 5