jQuery эффект для изменения размера текста

Question

Итак, я пытаюсь создать два смежных элемента div, чтобы при наведении мыши элемент div справа перемещался влево, а элемент div изменял размеры (становясь все теснее). Div слева содержит текст, который, когда div становится плотнее, слова в go должны переходить на следующую строку, чтобы соответствовать новому размеру, и это именно то, что я хочу. но проблема в том, что когда слова go на следующей строке просто исчезают со строки и появляются в следующей. Я хочу, чтобы они переместились на следующую строку вместо того, чтобы исчезать и появляться, как это: вот код

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {

    $(".SideMenu").mouseout(function() {

      $(".mainTitleDiv").animate({
        width: '900px',
      }, {
        queue: false,
      })


      $(".SideMenu").animate({
        right: '-500px',
      }, {
        queue: false,
      })
    });

  });
  $(document).ready(function() {
    $(".SideMenu").mouseover(function() {
      $(".mainTitleDiv").animate({
        width: '400px',
      }, {
        queue: false,
      })
      $(".SideMenu").animate({
        right: '0px',
      }, {
        queue: false,
      })
    });

  });
</script>

Answer 1

Вот варианты для достижения Подгонка текста к контейнеру

ИСПОЛЬЗОВАНИЕ CSS vw

<h1>Fit Me</h1>

CSS

@import url('https://fonts.googleapis.com/css?family=Bowlby+One+SC');

h1 {
  text-align: center;
  font-family: 'Bowlby One SC', cursive;
  font-size: 25.5vw;
}

ИСПОЛЬЗОВАНИЕ jQUERY Библиотека такая FitText

Вот пример после включения библиотеки в ваш HTML file

jQuery("h1").fitText(0.38);

Вот ссылка на другую библиотеку

• textFit