JavaScript自適應調整文字大小

今天有個任務，發現頁面上的數字由於太長而與其他數字重疊了。這個數字還不能像文字那樣只顯示一部分，必須全部顯示。想了一些辦法都不行，最后把超過1000變成1K，大於K改成M，這樣辦法都行，還是長呀。

注意：我這個任務不是在不同屏幕下文字大小調整，而是同一種屏幕下調整字體大小。

在網上還找到了一種方法https://www.zhuwenlong.com/blog/article/528611f363c705fc73000001，但是沒有使用。

同時又去試了一下svg是否可以自動調整文字大小，發現不行(可能是我沒搞清楚，如果把SVG當成一個圖片可能好使)。

最后想了一個辦法，根據數字的長度動態修改文字的大小。系統使用AngularJS寫的。所以在controller.js中設定了一個$scope.myStyle的樣式，並且把樣式放在div上：

<div ng-style="myStyle">...</div>

然后在controller.js中判斷字符串長度。首先先把數字變成字符串並且都連接在一起，然后判斷最終的字符串長度。

示例:

if(text_length <= 6) {
    $scope.myStyle = {
       "font-size": "34px",
    }
} else if(text_length <= 8) {
    $scope.myStyle = {
       "font-size": "32px",
    }
} else if(text_length <= 10) {
    $scope.myStyle = {
       "font-size": "30px",
    }
} else if(text_length <= 12) {
    $scope.myStyle = {
       "font-size": "26px",
    }
} else if(text_length < 18) {
    $scope.myStyle = {
       "font-size": "22px",
    }
} else {
    $scope.myStyle = {
       "font-size": "20px",
    }
}

最后的顯示效果還可以，不過調試的過程要自己慢慢調。😄

@完