使用js控制文字大小自动适应div不换行，div中文字字号自动调整大小以适应固定宽度

爱拍照的小码农

已于 2023-09-14 21:25:15 修改

阅读量681

点赞数

文章标签： javascript 前端 css

于 2023-09-08 22:41:14 首次发布

本文链接：https://blog.csdn.net/weixin_45644355/article/details/132768654

版权

<!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>
            * {
                padding: 0;
                margin: 0;
            }
            #text-container {
                margin: 30px;
                width: 300px;
                height: 30px;
                border: 1px solid #000;
                overflow: hidden; /* 隐藏溢出的内容 */
            }

            #text-container p {
                font-size: 28px; /* 初始字体大小 */
                white-space: nowrap; /* 禁止文字换行 */
            }
        </style>
    </head>
    <body>
        <div id="text-container">
<p>fadffadffadffadffadffadffadffadffadffadffadffadffadffadffadffadffadffadffadffadffadffadffad	ffa中过</p>
        </div>
    </body>
    <script>
        window.addEventListener("DOMContentLoaded", adjustFontSize);

        function adjustFontSize() {
            const textContainer = document.getElementById("text-container");
            const textElement = textContainer.querySelector("p");

            let fontSize = parseInt(window.getComputedStyle(textElement).fontSize);

            while (textElement.scrollWidth > textContainer.clientWidth && fontSize > 10) {
                fontSize--;
                textElement.style.fontSize = `${fontSize}px`;
            }
            while (textElement.scrollWidth < textContainer.clientWidth - 10 && fontSize < 32) {
                 fontSize += 1
                 numberItem.style.fontSize = `${fontSize}px`
                 console.log(fontSize, '----fontSize')
             }
        }
    </script>
</html>