html文字大小自动适应宽度,三种字体大小自适应容器宽度的方法

618项目中遇到过这样一个问题，移动端各种机型屏幕宽度，各页面中的标题字数是不定的，设计师根据375宽的屏设计的字体大小为20px，在iPhone5中320的屏宽下某些页面由于标题文字长了些就出现了标题折行。所以提出一个问题，可否实现字体大小根据容器宽度自适应，即在小屏幕下由于标题字数多出现折行的话，就减小字体大小，从而达到不折行的效果。

首先是想从CSS方向上解决，然而搜索一番没有找到解决方案，要想实现需要计算协助，css计算目前只有calc()方法，然而calc()不能解决这个问题。所以这里借助js来从三个方向上解决问题。

方向一 动态计算字体大小

通过计算原有font-size下文案所撑起的宽度，除以容器宽度(这里设定容器宽度为屏幕宽度)，得出需要缩放的系数，将系数换算成百分比赋值给font-size即可。

代码如下：

这个标题很长哦可能一行放不下的怎么办呢

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 + '%';

方向二 缩放容器

该方案类似方案一，只是缩放的不是font-size，而是通过缩放容器。使用transform的scale或zoom，其中transform的scale需要设定transform-origin: 0 0;且只对block元素有效(inline-block也有效)

代码如下：

这个标题很长哦可能一行放不下的怎么办呢

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;

方向三 svg视口和视图框

最近在学习SVG，所以想到了SVG视口和视图框。同样也是需要计算指定font-size下的文字宽度，然后就是应用视口和视图框的原理，将宽度赋值给viewBox。

代码如下：

xmlns:xlink="http://www.w3.org/1999/xlink">

这个标题很长哦可能一行放不下的怎么办呢

var textWidth = document.getElementsByClassName('svg-text')[0].getBoundingClientRect().width;

document.getElementsByClassName('hd3')[0].setAttribute('viewBox', '0 0 ' + textWidth+ ' 50');