javascript實現一行文字隨不同設備自適應改變字體大小至完全展示

產品提了一個小需求，希望一行能展示用戶輸入的所有文字，因爲最多限制爲25字符，但是如果夾雜英文/韓文/日文等，即使字符數是一樣的，但是展示的長度不一樣，則有些title標題會被截斷。

效果如圖

前提是總字數有一個差不多展示一行的最大限制，否則文字太小，也不能保證正常展示。

<div id="titleBox">
         <div class="title" id="title">
                哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈
        </div>
</div>

//title字體大小自適應，以能完全在一行顯示25個不同類型的字符。
    function fontAuto() {
        let titleBox = document.getElementById("titleBox");
        let maxWidth = titleBox.offsetWidth;
        let title=document.getElementById("title");
        let size=4;
        title.style.fontSize = size + 'vw';
        while (title.scrollWidth > maxWidth) {
            //當容器高度大於最大高度的時候，上一個嘗試的值就是最佳大小。
            size=size-0.2;
            title.style.fontSize = size+ 'vw';
        }
    }

思路：由於不同移動設備的分辨率不同，這裏給font-size用的單位爲vw,默認設置一個當前字體的font-size，獲取到文字外層容器的寬度，判斷文字的寬度是否大於容器的寬度，如果大於，則給當前的font-size減小0.1vw，如果px同理，可以按減小1px計算，然後成功。