TING沫 2022-09-15 17:21 采纳率: 70.6%
浏览 49
已结题

div文本样式自适应

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

  • 写回答

5条回答 默认 最新

  • 崽崽的谷雨 2022-09-15 17:51
    关注

    实际上只要 实现自动切换字号就行。这个需要一个标准 。
    比如：
    字数在 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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(4条)

报告相同问题？

问题事件

  • 系统已结题 9月30日
  • 已采纳回答 9月22日
  • 创建了问题 9月15日