Как вычислить размер шрифта для блока div с заданным размером?

[kirilljs]

Столкнулся с задачей: нужно, чтобы текст внутри div автоматически подстраивался под заданные ширину и высоту блока. Пробовал вручную подбирать font-size, но это неудобно для динамического контента. Поделитесь, как решить это программно?

---

Возможное решение: бинарный поиск по размеру шрифта

Идея: подбираем font-size так, чтобы текст полностью помещался в блоке. Используем бинарный поиск и DOM-измерения:

function fitTextToDiv(div, text) {
  const temp = document.createElement('div');
  temp.style.position = 'absolute';
  temp.style.visibility = 'hidden';
  temp.style.whiteSpace = 'pre-wrap'; // Учитываем переносы
  temp.style.padding = getComputedStyle(div).padding; // Копируем стили
  document.body.appendChild(temp);

  let minSize = 1;
  let maxSize = 100;
  let bestSize = 1;

  while (minSize <= maxSize) {
    const midSize = Math.floor((minSize + maxSize) / 2);
    temp.style.fontSize = `${midSize}px`;
    temp.textContent = text;

    const fitsWidth = temp.offsetWidth <= div.offsetWidth;
    const fitsHeight = temp.offsetHeight <= div.offsetHeight;

    if (fitsWidth && fitsHeight) {
      bestSize = midSize;
      minSize = midSize + 1; // Пробуем больший размер
    } else {
      maxSize = midSize - 1; // Уменьшаем размер
    }
  }

  div.style.fontSize = `${bestSize}px`;
  div.textContent = text;
  document.body.removeChild(temp);
}

// Пример использования:
const myDiv = document.getElementById('myDiv');
fitTextToDiv(myDiv, 'Текст, который должен поместиться!');

---

Важные моменты:

1. Стили копируются: Убедитесь, что временный элемент использует те же font-family, padding, border, и white-space, что и целевой div.
2. Производительность: Бинарный поиск эффективен (обычно 5-7 итераций), но избегайте частых вызовов.
3. Ограничения: Для длинных текстов или блоков с фиксированной высотой может потребоваться компромисс между размером шрифта и количеством строк.

---

Альтернативы:

• Canvas API: Метод measureText позволяет оценить ширину текста, но не учитывает высоту и переносы.
• CSS-решения: text-overflow: ellipsis или transform: scale() для простых случаев, но это не меняет font-size.