如何根据指定高度自动调整预览文本的font-size？

问题分析 #

你的核心需求是让预览文本的字号自动适配输入框指定的容器高度，确保文本在width: auto的前提下，即使换行也不会超出容器高度。原代码存在以下问题：

• 循环逻辑混乱，没有明确的终止条件，无法精准找到合适的字号
• 初始字号获取逻辑存在漏洞（未设置时会得到空值）
• 高度判断条件颠倒，无法正确检测文本是否超出容器

修正后的完整代码 #

HTML

<input type="number" placeholder="输入容器高度（px）">
<div class="previewText">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</div>
</div>

CSS

.previewText {
  width: auto;
  overflow: hidden;
  border: 1px solid #eee; /* 可选：便于观察容器范围 */
}
.previewText > div {
  margin: 0; /* 清除默认边距，避免干扰高度计算 */
  line-height: 1; /* 让文本高度更贴合字号，减少行高带来的误差 */
}

JavaScript

const input = document.querySelector('input');
const textContainer = document.querySelector('.previewText');
const textElement = textContainer.querySelector('div');

input.addEventListener('input', (e) => {
    const targetHeight = parseInt(e.currentTarget.value) || 0;
    textContainer.style.height = `${targetHeight}px`;
    
    if (targetHeight > 0) {
        adjustFontSizeToFitHeight(targetHeight);
    } else {
        textElement.style.fontSize = ''; // 高度为0时重置字号
    }
});

function adjustFontSizeToFitHeight(targetHeight) {
    // 从最大可能的字号开始尝试（等于容器高度）
    let fontSize = targetHeight;
    textElement.style.fontSize = `${fontSize}px`;
    
    // 如果文本高度超出容器，逐步减小字号直到适配
    while (textElement.offsetHeight > targetHeight && fontSize > 1) {
        fontSize--;
        textElement.style.fontSize = `${fontSize}px`;
    }
    
    // 极端情况处理：确保字号不小于1px
    if (fontSize <= 0) {
        textElement.style.fontSize = '1px';
    }
}

代码说明 #

1. 元素获取优化：直接通过querySelector获取内部文本元素，避免原代码中firstChild可能指向空白文本节点的问题
2. 输入值处理：对输入值做非数字判断，高度为0时重置文本字号
3. 字号调整逻辑：
   • 先尝试将字号设为容器高度，这是单行文本能适配的最大可能值
   • 通过循环逐步减小字号，直到文本高度不超过容器高度
   • 设置最小字号为1px，避免极端情况下出现无效字号
4. CSS辅助：设置line-height: 1让文本高度更贴合字号，减少行高对高度计算的干扰

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