div文本样式自适应

div固定宽高，字数多的时候要防止文本溢出，需要做换行并自动切换字号去自适应，这个需要怎么做？一点头绪都没有，请教一下

实际上只要 实现自动切换字号就行。这个需要一个标准 。
比如：
字数在 0-100 给 16px
100-200 给 14px
200以上给 12px

有了标准 那就根据字数 给 不同的字体大小就行

类似这个 。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;

            padding: 0;
        }

        .text {
            width: 100px;
            height: 100px;
            overflow: hidden;
            border: 1px solid red;
            font-size: 18px;
            word-break: break-all;
        }
    </style>
</head>

<body>
    <div class="text" id="text">
        66666666666666666666666666666666666666666666666666666666666
    </div>
    <div class="btnbox">
        <button>0-100</button>
        <button>100-200</button>
        <button>200以上</button>
    </div>
</body>
<script>
    let text = document.getElementById("text");
    let btnBox = document.getElementsByClassName("btnbox")[0];
    btnBox.onclick = function (e) {
        let key = e.target.innerText;
        if (key == "0-100") {
            text.style.fontSize = "18px";
        } else if (key == "100-200") {
            text.style.fontSize = "16px";
        } else if (key == "200以上") {
            text.style.fontSize = "14px";
        } else {
            text.style.fontSize = "12px";
        }
    }
</script>

</html>

只不过 你需要 动态获取 inerText的长度 然后根据这个判读

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;

            padding: 0;
        }

        .text {
            width: 100px;
            height: 100px;
            overflow: hidden;
            border: 1px solid red;
            /* font-size: 18px; */
            word-break: break-all;
        }
    </style>
</head>

<body>
    <div class="text" id="text">
        66666666666666666666666666666666666666666666666666666666666
        66666666666666666666666666666666666666666666666666666666666
        66666666666666666666666666666666666666666666666666666666666
        66666666666666666666666666666666666666666666666666666666666
    </div>
    <!-- <div class="btnbox">
        <button>0-100</button>
        <button>100-200</button>
        <button>200以上</button>
    </div> -->
</body>
<script>
    // let text = document.getElementById("text");
    // let btnBox = document.getElementsByClassName("btnbox")[0];
    // btnBox.onclick = function (e) {
    //     let key = e.target.innerText;
    //     if (key == "0-100") {
    //         text.style.fontSize = "18px";
    //     } else if (key == "100-200") {
    //         text.style.fontSize = "16px";
    //     } else if (key == "200以上") {
    //         text.style.fontSize = "14px";
    //     } else {
    //         text.style.fontSize = "12px";
    //     }
    // }
    let text = document.getElementById("text");
    

    let key = text.innerText.length;
    setFontSize(key);
    function setFontSize(key) {
        if (key > 0 && key <= 100) {
            text.style.fontSize = "18px";
        } else if (key > 100 && key <= 200) {
            text.style.fontSize = "16px";
        } else if (key > 200) {
            text.style.fontSize = "14px";
        } else {
            text.style.fontSize = "12px";
        }
    }

</script>

</html>

可以js生成个dom节点插入页面中，计算下插入文本的宽高，再js设置下实际显示区域的字体大小

css 样式文字超出换行不就行了，字体大小可以自适应的单位 例如 rem 就可以了

word-break:break-all;只对英文起作用，以字母作为换行依据
word-wrap:break-word; 只对英文起作用，以单词作为换行依据
white-space:pre-wrap; 只对中文起作用，强制换行
white-space:nowrap; 强制不换行，都起作用
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）