ionic中文字自适應大小

最近在做一個ionic+cordova的項目時，遇到在一個span中顯示的省市區資訊太長超出了，需要自适應文字大小的問題。其内容是由背景擷取的，無法通過界面觸發change事件來重新整理。經過摸索現将我的解決方法總結如下：

頁面：

<div id="div1" class="jisongxinxi-main">

    <span id="sp1" style="display:inline-block;">省市區</span><span id="sp2" style="display:inline-block;font-size:16px;">&nbsp;&nbsp;{{address.province}}&nbsp;{{address.city}}&nbsp;{{address.district}}</span>

</div>

注：這裡span裡面的style非常必要，而且注意兩個span必須放在同一行，否則會出現計算結果顯示能放下，實際卻換行的問題

背景代碼（js&angularjs）：

var runTimeChangeFontSize = function()

    {

        var div1 =  document.getElementById("div1");

        var sp1=document.getElementById("sp1");

        var sp2=document.getElementById("sp2");

        if(!$scope.address.province)

        {

            return;

        }

        //該操作非常重要

        sp2.innerText = $scope.address.province + ' ' + $scope.address.city + ' ' + $scope.address.district;

        var oDiv = getComputedStyle(div1);

        var borderleft = getPxNum(oDiv['border-left-width']);

        var borderright = getPxNum(oDiv['border-right-width']);

        var paddingleft = getPxNum(oDiv['padding-left']);

        var paddingright = getPxNum(oDiv['padding-right']);

        var originalwith = div1.offsetWidth - borderleft - borderright - paddingleft - paddingright;

        var totalwidth = sp1.offsetWidth + sp2.offsetWidth;

        //每次都從預設值開始，防止上一次選擇了比較長的位址，本次選擇短位址時，不會重新計算

        //通常位址資訊的值是不會超過16px的，這裡根據實際項目需求設定

        var size = 17;

        do

        {

            --size;

            sp2.style.fontSize = size + 'px';

            totalwidth = sp1.offsetWidth + sp2.offsetWidth;

            //app最小字号8px

            if(8 >= size)

            {

                //防止死循環

                break;

            }

        }while(originalwith < totalwidth);

    };

    //這個函數隻處理‘19px’這樣的字元串

    var getPxNum = function(strpx)

    {

        var arr =  strpx.split('px');

        return parseInt(arr[0]);

    };

注：隻需要在恰當的地方調用函數runTimeChangeFontSize就可用了，如者在$ionicView.beforeEnter中取值，在$ionicView.afterEnter中調用。