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

Question

Я работаю над этим проектом. По сути, у меня есть 2 контейнера, каждый из которых имеет 2 разных ширины и высоты. Моя цель - найти правильный размер шрифта для второго контейнера относительно первого контейнера.

В обоих этих контейнерах они содержат в точности одинаковые слова в зависимости от ввода пользователя. Я также реализовал свойство "word-break" в обоих из них. Если 1-й контейнер начинает разбивать слова при достижении конца строки, я хочу, чтобы 2-й контейнер делал то же самое.

Как бы я решил это в Javascript или Jquery?

Answer 1

Одна идея состоит в том, чтобы рассчитать font-size на основе радио ширины:

x = originalFontSize * (newWidth / originalWidth)
  = 51 * (510 / 612)
  = 42.5

Вот демонстрация:

let firstBox = document.getElementById('one');
let firstSize = parseFloat(window.getComputedStyle(firstBox, null).getPropertyValue('font-size'));
let els = document.getElementsByClassName('resize');

Array.from(els).forEach((el) => {
  let thisSize = firstSize * (el.clientWidth / firstBox.clientWidth);
  el.style.fontSize = thisSize + "px";
});

div {
  word-break: break-all;
  margin: 0 0 0.5em;
  background-color: lightgray;
}

#one {
  width: 320px;
  font-size: 18px
}
#two {
  width: 280px;
}
#three {
  width: 210px;
}

<div id="one">
  Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
</div>
<div id="two" class="resize">
  Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
</div>
<div id="three" class="resize">
  Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
</div>

Answer 2

Используете ли вы какие-либо препроцессоры CSS? Вы можете достичь желаемого, сделав функцию, возвращающую значение в vw, которое можно рассчитать с использованием правила трех. Вот то, что я использовал несколько месяцев go, используя Stylus.

m_rof(value)
    ((value / 375) * 100)vw

По сути, вот что он делает и как работает.

В маленьком портретном окне просмотра (375 пикселей), определенный в визуальном дизайне, я могу сохранить то же соотношение в окне просмотра 414. Если шрифт имеет вид 12 пикселей в окне просмотра 375, он будет около 14 пикселей в окне просмотра 414.

Вы можете использовать это, чтобы размер текста всегда соответствовал области просмотра ИЛИ Вы можете установить размер шрифта, используя Javascript, чтобы основать размер на контейнере.