Как настроить размер шрифта абзаца, чтобы заполнить высоту элемента внутри контейнера flexbox? - PullRequest
Новая
       10

Как настроить размер шрифта абзаца, чтобы заполнить высоту элемента внутри контейнера flexbox?

0 голосов
/ 08 февраля 2019

Я создаю контейнер 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;
}

Вот что у меня есть:

what I have

и что-то вроде этого я хочу:

what I want

Ответы [ 2 ]

0 голосов
/ 08 февраля 2019

В этом посте содержится довольно много ответов с точки зрения плагинов и других: Масштабирование шрифта в зависимости от ширины контейнера

вам нужно будет убедиться, что все, что вы применяете, изменяет размер шрифтав отношении высоты, а не ширины!

И я думаю, что использование 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>
0 голосов
/ 08 февраля 2019

Как насчет установить размер шрифта 16px по умолчанию, затем использовать JavaScript или jquery и получить длину текста, а затем проверить, является ли длина <(num), например, установить шрифт 18px! </p>

...