用于调整文本大小的 jQuery 效果

Question

所以，我正在尝试制作两个相邻的 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>

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文件中包含库后的示例

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

这是其他图书馆的链接

• 文字适合