如何在父容器中实现文本过长时自动缩小字体尺寸？

需求：固定宽高的容器中，短文本正常显示，长文本自动缩小字体尺寸，容器宽高保持不变。

实现思路 #

通过JavaScript检测文本内容是否超出容器范围，若超出则逐步减小字体大小，直到内容完全适配容器，同时设置最小字体阈值防止文字过小无法阅读。

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<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>文本适配测试</title>
</head>
<body>
    <!-- 长文本测试容器 -->
    <div class="text-container" 
         style="margin-top: 20px;
                width: 200px;
                height: 50px;
                border: 1px solid red;
                text-align: center;
                line-height: 50px; /* 垂直居中，可选 */
                overflow: hidden;"> <!-- 隐藏溢出内容，避免初始显示混乱 -->
        <p class="content-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit</p>
    </div>

    <!-- 短文本测试容器 -->
    <div class="text-container" 
         style="margin-top: 20px;
                width: 200px;
                height: 50px;
                border: 1px solid red;
                text-align: center;
                line-height: 50px;
                overflow: hidden;">
        <p class="content-text">这是短文本</p>
    </div>

    <script>
        // 文本适配函数
        function fitTextToContainer(containerSelector, minFontSize = 12) {
            const containers = document.querySelectorAll(containerSelector);
            
            containers.forEach(container => {
                const textEl = container.querySelector('.content-text');
                if (!textEl) return;

                // 重置字体大小为初始值（继承默认字体）
                textEl.style.fontSize = '';
                let currentFontSize = parseFloat(window.getComputedStyle(textEl).fontSize);

                // 检查是否溢出，逐步缩小字体
                while (textEl.scrollHeight > container.clientHeight || textEl.scrollWidth > container.clientWidth) {
                    currentFontSize -= 1;
                    if (currentFontSize < minFontSize) {
                        currentFontSize = minFontSize;
                        break;
                    }
                    textEl.style.fontSize = `${currentFontSize}px`;
                }
            });
        }

        // 页面加载完成后执行适配
        window.addEventListener('load', () => {
            fitTextToContainer('.text-container');
        });

        // 若文本动态更新，调用此函数重新适配
        // fitTextToContainer('.text-container');
    </script>
</body>
</html>

关键说明 #

• 容器样式：设置固定width和height，添加overflow: hidden避免初始溢出内容显示；可选line-height实现垂直居中。
• 适配逻辑：
  1. 先重置文本字体为默认值，避免之前的修改影响判断。
  2. 通过对比scrollHeight（文本实际高度）与clientHeight（容器可视高度）、scrollWidth与clientWidth，判断内容是否溢出。
  3. 逐步减小字体大小，直到内容不溢出或达到最小字体限制。
• 动态文本适配：如果文本是动态生成或修改的，只需再次调用fitTextToContainer函数即可重新适配。

内容的提问来源于stack exchange，提问作者qwerty