Javascript 调整文本大小的jQuery效果

所以，我尝试制作两个相邻的div，这样在鼠标上方，右边的div向左移动，左边的div正在调整大小（越来越紧）。左边的div包含文本，当div变得更紧时，中的单词必须转到下一行以适应新的大小，这正是我想要的。但问题是，当单词转到下一行时，它们只是从下一行消失并出现在下一行中。我希望他们移动到下一行，而不是消失和出现，就像这样： 这是密码

<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>

$（文档）.ready（函数（）{
$（“.SideMenu”）.mouseout（函数（）{
$（“.maintTitleDiv”）.animate({
宽度：“900px”，
}, {
队列：false，
})
$（“.SideMenu”）.animate({
右：'-500px'，
}, {
队列：false，
})
});
});
$（文档）.ready（函数（）{
$（“.SideMenu”）.mouseover（函数（）{
$（“.maintTitleDiv”）.animate({
宽度：“400px”，
}, {
队列：false，
})
$（“.SideMenu”）.animate({
右：“0px”，
}, {
队列：false，
})
});
});

这里有一些选项，可以实现将文本适配到容器中

使用CSS

vw

<h1>Fit Me</h1>

使用jQUERY库，例如

以下是将库包含在HTML文件中后的示例

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

这里有到其他图书馆的链接

---

也分享HTML代码。还包括css，因为这是同样相关的部分。这是一个很好的部分，我尝试过，但这并不完全是我的意思。。我不想调整字体大小，我希望它的大小相同，但我希望它在div变紧时动态移动。

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