背景

之前在專案中有遇到需要根據獲取文字的長度自適應顯示文字的需求，整理髮現這種需求在專案中多次遇到，所以考慮編寫一個通過的js外掛來實現。

使用

使用時只需要指定dom元素的寬度和高度，外掛會自動計算出合適的字號大小，需要注意的是，因為許多瀏覽器支援的最小字號為12px，而過大的字號顯示並不美觀，所以在計算時，取的最小字號是12px，最大字號是200px。

下面貼出使用程式碼作為例子

...
<script src="~/autofontsize.min.js"></script>
...
<style type="text/css">
    .font-item{
        display:flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-start;
        padding: 0 20px;
        height:60px;
        width:600px;
    }
</style>
...
<div class="font-item" id="font1">這個是測試</div>
<div class="font-item" id="font2">這個是測試這個是測試這個是測試這個是測試</div>
<div class="font-item" id="font3">這個是測試這個是測試這個是測試這個是測試這個是測試這個是測試這個是測試</div>
<div class="font-item" id="font4">這個是測試這個是測試這個是測試這個是測試這個是測試這個是測試這個是測試這個是測試這個是測試</div>
...
<script type="text/javascript">
  var autoFontsize = new AutoFontSize(document.getElementById("font1"),600,60);
  autoFontsize.fontSize();

  autoFontsize = new AutoFontSize(document.getElementById("font2"),600,60);
  autoFontsize.fontSize();

  autoFontsize = new AutoFontSize(document.getElementById("font3"),600,60);
  autoFontsize.fontSize();

  autoFontsize = new AutoFontSize(document.getElementById("font4"),600,60);
  autoFontsize.fontSize();
</script>
...
 

效果

如圖所示，每一行寬高均相同，外掛已根據不同的長度來設定最大可以填滿的字號大小，這裡可以根據不同的需求設定顯示的位置或溢位設定。

下載

目前外掛上傳到csdn下載中，下載地址是：自適應字號js外掛