javascript實現一行文字隨不一樣設備自適應改變字體大小至字數徹底展現

產品提了一個小需求，但願一行能展現用戶輸入的全部文字，由於最多限制爲25字符，可是若是夾雜英文/韓文/日文等，即便字符數是同樣的，可是展現的長度不同，則有些title標題會被截斷。

效果如圖

前提是總字數有一個差很少展現一行的最大限制，不然文字過小，也不能保證正常展現。

.lineClamp { overflow: hidden !important; text-overflow: ellipsis !important; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; white-space: normal;
        }

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

//title字體大小自適應，以能徹底在一行顯示25個不一樣類型的字符。
    function fontAuto() { let titleBox = document.getElementById("titleBox"); let title=document.getElementById("title"); let size=4; title.style.fontSize = size + 'vw'; let scrollWidth=title.scrollWidth; while (title.scrollWidth > document.getElementById("titleBox").offsetWidth) { scrollWidth=title.scrollWidth; //當容器高度大於最大高度的時候，上一個嘗試的值就是最佳大小。
            size=size-0.2; title.style.fontSize = size+ 'vw'; if(scrollWidth<=title.scrollWidth){ $("#title").addClass("lineClamp1");
　　　　　　　　　 $("#title").removeClass("toh");
　　　　　　　　　　break; 

　　　　} 
　　} 
} 
fontAuto();

 

思路：因爲不一樣移動設備的分辨率不一樣，這裏給font-size用的單位爲vw,默認設置一個當前字體的font-size，獲取到文字外層容器的寬度，判斷文字的寬度是否大於容器的寬度，若是大於，則給當前的font-size減少0.1vw，若是px同理，能夠按減少1px計算，而後成功，若是在一些小屏幕設備上，字體小到必定大小達到極限，不會繼續減少，則始終跳不出循環，這時加一個class,讓文字最後顯示三個點。

多行文字自適應看這裏

 

注意：因爲是單行文本，超出縮小字體到不能縮小的時候顯示三個點，因此要默認給該行元素加一個class

.line_nowrap{

white-space:nowrap;

}，

限定文本不換行，當字體縮小到必定大小，不能再縮小，依然超出的時候，添加 .lineClamp1 class,增長三個點，但此時因爲加了不換行的屬性，三個點是不能展現的，這時候還須要去掉不換行class.

這裏有個疑問，親測發現

Size減少的同時，size所在的div和size外層的div都會減少，因此這裏用了

document.getElementById("titleBox").offsetWidth來獲取最新的文字所在的盒子寬度。