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
來獲取最新的文字所在的盒子寬度。