通过更改文字自定义DIV中的字体大小

Question

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

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

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') 
 
    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线，以防止当文本长度改变时，进一步上下移动以下文本。 在手机上看起来特别糟糕。

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

Answer 1

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

1. 将文本的默认（当前）font-size保存为某个变量。
2. 将翻译应用默认font-size
3. 比较容器的宽度后（在我们的情况下，将body，但你可以改变它）和（在当前情况下#translate）文本元素的宽度。
4. 如果文本元素的宽度比容器的宽度大font-size减少某个值（例如0.1px），并转到步骤3.如果没有，那么这就是全部。

不要忘了让你h2内嵌块，使其宽度由内容定义，并添加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>

Answer 2

希望这将工作：

http://simplefocus.com/flowtype/

$('h2').flowtype({ 
minFont : 10, 
maxFont : 40, 
minimum : 500, 
maximum : 1200, 
fontRatio : 70 
}); 

Answer 3

使用它看起来是这样的：

p { 
 
    font-size: 4vw; 
 
}