618項目中遇到過這樣一個問題，移動端各種機型屏幕寬度惧辈，各頁面中的標題字數(shù)是不定的，設(shè)計師根據(jù)375寬的屏設(shè)計的字體大小為20px，在iPhone5中320的屏寬下某些頁面由于標題文字長了些就出現(xiàn)了標題折行凑懂。所以提出一個問題，可否實現(xiàn)字體大小根據(jù)容器寬度自適應(yīng)梧宫，即在小屏幕下由于標題字數(shù)多出現(xiàn)折行的話接谨，就減小字體大小，從而達到不折行的效果塘匣。
首先是想從CSS方向上解決脓豪，然而搜索一番沒有找到解決方案，要想實現(xiàn)需要計算協(xié)助忌卤，css計算目前只有calc()方法扫夜，然而calc（）不能解決這個問題。所以這里借助js來從三個方向上解決問題驰徊。
方向一 動態(tài)計算字體大小
通過計算原有font-size下文案所撐起的寬度笤闯，除以容器寬度（這里設(shè)定容器寬度為屏幕寬度），得出需要縮放的系數(shù)棍厂，將系數(shù)換算成百分比賦值給font-size即可颗味。
代碼如下：
<div class="hd hd1">
<span class="hd-text">這個標題很長哦可能一行放不下的怎么辦呢</span>
</div>
<script>
var hdWidth = document.body.getBoundingClientRect().width;
var textWidth = document.getElementsByClassName('hd-text')[0].offsetWidth;
var scale = hdWidth / textWidth;
document.getElementsByClassName('hd-text')[0].style.fontSize = scale * 100 + '%';
</script>
方向二 縮放容器
該方案類似方案一，只是縮放的不是font-size牺弹，而是通過縮放容器浦马。使用transform的scale或zoom时呀，其中transform的scale需要設(shè)定transform-origin: 0 0;且只對block元素有效（inline-block也有效）
代碼如下：
<div class="hd">
<span class="hd-text">這個標題很長哦可能一行放不下的怎么辦呢</span>
</div>
<script>
var hdWidth = document.body.getBoundingClientRect().width;
var textWidth = document.getElementsByClassName('hd-text')[0].offsetWidth;
var scale = hdWidth / textWidth;
document.getElementsByClassName('hd-text')[0].style.zoom = scale;
</script>
方向三 svg視口和視圖框
最近在學(xué)習(xí)SVG，所以想到了SVG視口和視圖框晶默。同樣也是需要計算指定font-size下的文字寬度谨娜，然后就是應(yīng)用視口和視圖框的原理，將寬度賦值給viewBox磺陡。
代碼如下：
<svg class="hd" width="100%" height="50" viewBox="0 0 320 50" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text class="svg-text" x="0" y="20">這個標題很長哦可能一行放不下的怎么辦呢</text>
</svg>
<script>
var textWidth = document.getElementsByClassName('svg-text')[0].getBoundingClientRect().width;
document.getElementsByClassName('hd3')[0].setAttribute('viewBox', '0 0 ' + textWidth+ ' 50');
</script>
