javascript - 使用更改文本自动调整定义的 DIV 中的字体大小

Question

我想通过每隔几秒钟用另一种语言的同一句话交换来自动翻译我网站上的文本，但这不是我的问题所在。

我已经得到了这个设置的 JS，它看起来像这样:

jQuery(function ($) {
    var languages = ["¡Hola, me llamo X! Bienvenido a mi página web.", "Hallo, ich heiße X. Willkommen auf meiner Webseite.", "你好, 我叫 X。欢迎来到我的网站。"];
    var counter = 0;
    var $exc = $('#translate')
    setInterval(function () {
        $exc.text(languages[counter++]);
        if (counter >= languages.length) {
            counter = 0;
        }
    }, 1600)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<h2 id="translate">你好, 我叫 Jan。欢迎来到我的网站。</h2>

现在我想调整 h2 的 font-size 以始终适合 1 行，以防止在 text-length 时将以下文本进一步上下移动变化。在手机上看起来特别糟糕。

我尝试使用开源 JS“jtextfill”，但它不起作用。

Answer 1

更改文本的 font-size 的想法在这里并不难。

1. 将文本的默认(当前)font-size 保存到某个变量。
2. 应用翻译后应用默认font-size
3. 比较容器的宽度(在我们的例子中是 body，但你可以改变它)和文本元素的宽度(在当前例子中是 #translate)。
4. 如果文本元素的宽度大于容器的宽度，则将font-size 减小某个值(例如减小0.1px)并转到第3 步。如果否就这样。

不要忘记制作 h2 内联 block 以使其宽度由内容定义并添加 white-space: nowrap 以防止文本移动到下一行并允许我们的计算。

演示:

jQuery(function ($) {
    var languages = ["¡Hola, me llamo Jan! Bienvenido a mi página web.", "Hallo, ich heiße Jan. Willkommen auf meiner Webseite.", "你好, 我叫 Jan。欢迎来到我的网站。"];

    var counter = 0;
    var $exc = $('#translate');
        
    var defaultFontSize = parseFloat($exc.css("font-size"));
    
    function adjustFontSize() {
        var fontSize = defaultFontSize;
        $exc.css("font-size", fontSize + "px");
 
        while ($("body").width() < $exc.width()) {
          fontSize -= 0.1;
          $exc.css("font-size", fontSize + "px");
        }
    };
    
    adjustFontSize();
    
    setInterval(function () {
        $exc.text(languages[counter++]);
        
        adjustFontSize();
        
        if (counter >= languages.length) {
            counter = 0;
        }
    }, 1600)
})

body {
  /* just 300px width for demo */
  width: 300px;
  
  /* just styles for demo */
  border-right: 1px dotted gray;
  height: 100vh;
  margin: 0;
}

#translate {
  /* take width and disable line wrapping */
  display: inline-block;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<h2 id="translate">你好, 我叫 Jan。欢迎来到我的网站。</h2>