CSS 文字大小自适应容器宽度的方法

35 min read

方向一 动态计算字体大小

通过计算原有font-size下文案所撑起的宽度，除以容器宽度（这里设定容器宽度为屏幕宽度），得出需要缩放的系数，将系数换算成百分比赋值给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需要设定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视口和视图框

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