Как вписать текст по его размеру в блок div?

Для вписывания текста по его размеру в блок div в JavaScript вам понадобится использовать несколько свойств и методов.

Вариант 1: Использование CSS свойств
В данном варианте вы можете использовать CSS свойство overflow для изменения поведения блока div, когда текст выходит за его размеры. Вы можете установить значение auto, чтобы добавить прокрутку для блока div, если текст не помещается в него:

var divElement = document.getElementById('yourDivId');
divElement.style.overflow = 'auto';

Если вы хотите, чтобы текст автоматически уменьшался, чтобы поместиться в блок div, вы можете использовать CSS свойство text-overflow со значением ellipsis, чтобы обрезать текст и добавить многоточие в конце:

var divElement = document.getElementById('yourDivId');
divElement.style.overflow = 'hidden';
divElement.style.textOverflow = 'ellipsis';
divElement.style.whiteSpace = 'nowrap';

Вариант 2: Использование JavaScript методов

В этом варианте вы можете использовать JavaScript методы для проверки, помещается ли текст в блок div, и изменять его размеры или шрифт в зависимости от результата.

function fitTextInDiv() {
  var divElement = document.getElementById('yourDivId');
  var textElement = divElement.firstChild;

  var fontSize = 100;
  var maxWidth = divElement.offsetWidth;
  var textWidth = textElement.offsetWidth;

  while (textWidth > maxWidth) {
    fontSize -= 1;
    textElement.style.fontSize = fontSize + 'px';
    textWidth = textElement.offsetWidth;
  }
}

window.addEventListener('resize', fitTextInDiv);

Этот код будет автоматически уменьшать размер шрифта текста в блоке div, когда размер окна изменяется или когда текст добавляется или изменяется в блоке div.

Надеюсь, эти примеры помогут вам вписать текст по его размеру в блок div при использовании JavaScript.