使用CSS和JS实现字体自适应

有没有遇到过这种场景：
有一个内容需要在一行显示，内容的长度未知，正常显示时我们需要字体大小正常显示，当文字长度超出盒子模型，我们需要全部显示并且不换行。是的！这个方法实现这种场景。

假如我们有一个宽度为375px的盒子，里面有一个段问题，可是它太长了，已经越界了

html代码

<style type="text/css">
    .container{
        width: 375px;
        background: lightseagreen;
        white-space: nowrap;
        line-height: 90px;
    }
    .text{
        font-size: 20px;
    }
</style>

<div class="container">
    <div class="text">如何使字体大小自适应容器大小？如何使字体大小自适应容器大小？如何使字体大小自适应容器大小？</div>
</div>

这个样子可没法向上面交差，有什么方法让它字体变小呢？答案是容器缩放。这里需要用到zoom或transform的scale。其中使用transform的scale需要设定transform-origin 且只对block元素有效（inline-block也有效）。

修改后的代码：

    //css
    <style type="text/css">
        .container{
            width: 375px;
            background: lightseagreen;
            white-space: nowrap;
            line-height: 90px;
        }
        .text{
            font-size: 20px;
            display: inline-block;
            transform-origin: 0 50%;
        }
    </style>

    //js
    <script>
        let domContainer = document.querySelector('.container');
        let domText      = domContainer.querySelector('.text');

        let boxWidth  = domContainer.offsetWidth
        let txtWidth  = domText.offsetWidth
        if(txtWidth <= boxWidth) {
            domText.style.transform = 'none';
        } else {
            let r = boxWidth/txtWidth;
            domText.style.transform = `scale(${r})`;
        }
    </script>

大功告成，看效果：