通過更改文字自定義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; 
 
}