У меня есть гибкий контейнер 100vh, колонка направления.
Под ним у меня есть динамическое количество элементов flex с одинаковой высотой.
Все эти гибкие элементы занимают все вертикальное пространство:
<div>
<ul class="container">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
и css:
ul {
display: flex;
flex-direction: column;
height: 100vh;
}
li {
flex: 1 1 auto;
}
Элементы содержат текст. И я хочу подогнать текст под высоту элемента. Поэтому я использую js с единицами просмотра для вычисления правильного размера шрифта:
var lis = document.querySelectorAll('li');
var fontsize = (100 / lis.length) * 0.8;
document.querySelector('.container').style.fontSize = fontsize + "vh";
Вот полная рабочая скрипка, которую я только что описал.
Моя проблема заключается в том, что если гибкий элемент содержит достаточно текста, чтобы его можно было перенести на одну или несколько новых строк, этот подход больше не работает.
<div>
<ul class="container">
<li>1</li>
<li>2</li>
<li>multiline becomes a problem with this approach</li>
</ul>
</div>
Вот демонстрация проблемы.
Чтобы рассчитать размер шрифта для нескольких строк, мне нужно знать, сколько строк он занимает, но это само по себе зависит от размера шрифта. Так что это проблема, которая ест свой хвост.
Мой подход
Возможный подход, о котором я могу подумать, будет следующим:
1 Detect number of li's
2 Trigger font-size calculation as seen above and apply
3 Calculate if any lis text will wrap onto new lines and how many (how?)
3.a. If no texts wrap into new lines stop here.
3.b. If there is text that wraps into new lines
3.b.1. Sum number of li's + all new lines on all multiline li's
3.b.2. Re-trigger font-size calculation with this number and apply
3.b.3. Calculate again if any li's text will wrap onto how many new lines, and compare with before font-size change.
3.b.4.a. If there are the same ammount of new lines, stop here.
3.b.4.b. If there are more new lines, repeat from step 3.b.1
Но этот подход кажется грязным и может привести ко многим шагам вычисления и корректировки размера шрифта. Кроме того, я не уверен, как я могу выполнить шаг 3.
Итак, как подойти к этой проблеме?
Этот вопрос был помечен как возможный дубликат из этого другого вопроса . Но этот вопрос специально требует вписать текст в одну строку, а это совсем другое дело.
Тем не менее, я мог бы извлечь некоторые подсказки из некоторых ответов, поскольку они пытаются угадать, переполняет ли текст div. В частности, мне любопытно этот ответ , как @Hoffmann специально говорит, чтобы попытаться избежать проблемы петли, которую я упоминаю в своем подходе. Я попытаюсь понять код его плагина, который теперь поддерживается кем-то еще здесь: https://github.com/BrOrlandi/big-text.js/blob/master/big-text.js
Спасибо