Как сделать плавное увеличение высоты текста?

Для реализации плавного увеличения высоты текста в JavaScript можно использовать CSS свойство transition с анимацией по высоте элемента. Вот пример кода:

HTML:

<div id="text" class="text-container">
  <p>This is some example text.</p>
</div>

<button onclick="increaseHeight()">Increase Height</button>

CSS:

.text-container {
  height: 50px; /* начальная высота элемента */
  overflow: hidden; /* скрытие содержимого, которое выходит за границы элемента */
  transition: height 0.5s ease-in-out; /* задаем плавную анимацию увеличения высоты в течение 0.5 секунды */
}

.text-container.expanded {
  height: 100px; /* высота элемента после увеличения */
}

JavaScript:

function increaseHeight() {
  var textContainer = document.getElementById('text');
  textContainer.classList.toggle('expanded');
}

В этом примере имеется блок "text-container" с начальной высотой 50 пикселей и одним параграфом текста внутри. При нажатии на кнопку "Increase Height" вызывается функция increaseHeight(), которая при помощи метода classList.toggle('expanded') добавляет или удаляет класс "expanded" у блока "text-container".

CSS класс "expanded" изменяет высоту блока на 100 пикселей. Свойство transition в CSS задает плавное изменение значений свойства height в течение 0.5 секунды с равномерным ускорением и замедлением (ease-in-out).

Таким образом, при каждом нажатии на кнопку "Increase Height" блок "text-container" будет плавно раскрываться, увеличивая свою высоту с 50px до 100px.