Как адаптировать авторазмер шрифта под контейнер?

Question

[Angel Leo]

Доброго времени суток, уважаемые форумчане.
Нужна помощь в адаприровании текста.
Есть код:

while( $('.container').children('div').height() > $('.container').height() ) {
          $('.container').children('div').css('font-size', (parseInt($('.container').children('div').css('font-size')) - 1) + "px" );
      }

Для одного контейнера с фиксированным размером div:

<div class="container">
      <div>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
      </div>
    </div>

.container {
        width: calc(300px - 10px);
        height: calc(100px - 10px);
        border: 1px solid black;
        overflow: hidden;
        font-size: 1em;
        display: flex;
        align-items: center;
        text-align: center;
        padding: 5px;
        margin: 5px;
      }

Работает идеально, шрифт автоматически меняется в зависимости от числа символов подстраиваясь под размер блока.
Проблема в том, что число контейнеров не фиксировано, как всем последующим контейнерам, подгонять шрифт независимо от размера шрифта первого контейнера

<div class="container">
      <div>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
      </div>
    </div>

    <div class="container">
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
      </div>
    </div>

    <div class="container">
      <div>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
      </div>
    </div>

Получается первый контейнер подстраивается под размер, остальные наследуют стиль первого контейнера.
Задавать каждому блоку свой id или class не вариант, прописывать каждому свои стили. При большом числе контейнеров, будет бардак.
Заранее спасибо.

Comments

[Модератор]

Angel Leo дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац).
В противном случае ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

[Angel Leo]

Модератор, Спасибо за информацию. Буду внимательнее. Вопрос точно косается связки js и css.

Answer 1

[Алексей Демидов]

1. Собрать все контейнеры в массив: var containers = document.querySelectorAll('.container');
2. Пройти циклом по массиву и задать каждому ваше условие:
for(var i = 0; i < containers.length; i++) {
// Здесь ваш код для каждого containers[i], т. е. $('.container'), это теперь containers[i]
}

Comments

[Angel Leo]

Спасибо. Все заработало. Каждый блок подгоняет размер независимот от остальных.

var containers = document.getElementsByClassName('container');
      for(var i = 0; i < containers.length; i++) {
        while( $(containers[i]).children('div').height() > $(containers[i]).height() ) {
            $(containers[i]).children('div').css('font-size', (parseInt($(containers[i]).children('div').css('font-size')) - 1) + "px" );
        }
      }