用於調整文本大小的 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);

這是其他圖書館的鏈接

• 文字適合