固定尺寸输入框溢出时如何实现自动换行并动态缩小字号？

固定尺寸的input输入框在内容溢出后，旧内容静止、新输入数字无法显示。需求是：内容溢出时自动换行，同时缩小字号，最多显示3行。尝试了responsiveFont函数未达预期；将pointer-events设为normal后，仅手动删除溢出内容时函数才生效。

原代码 #

<!DOCTYPE html>
<html>
<body>

 <input type="text" id="output-area" placeholder="0"  oninput="responsiveFont()" style=" width: 225px;
    height: 80px;
    font-size: 40px;
    text-align: right;
    pointer-events: none;">
<br><br>
<button onclick="Addition('1')">1</button>
<button onclick="Addition('2')">2</button>
<button onclick="Addition('3')">3</button>
<br><br>
<button onclick="clearAll()" style="background: red; color: white;">AC</button>
<button class="symbol"  onclick="del()">del</button>

 <script>
 let output_area = document.getElementById('output-area');
 function Addition(newValue){
            output_area.value += newValue;
        }
        
    function clearAll(){
            output_area.value = "";
        }
    function del (){
            output_area.value = output_area.value.slice(0, -1);
        }     

</script> 

</body>
</html>

尝试的responsiveFont函数 #

function responsiveFont (){
        output_area.addEventListener('input', () => {
    if (output_area.scrollWidth > output_area.clientWidth) {
    const fontSize = parseInt(window.getComputedStyle(output_area).fontSize);
    output_area.style.fontSize = `${fontSize - 10}px`;
  }
});
}

解决方案 #

核心问题说明 #

input是单行控件，天然不支持自动换行，这是无法实现需求的根本原因。必须替换为textarea，再配合样式和脚本实现功能。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<body>
  <textarea id="output-area" placeholder="0" style="
    width: 225px;
    height: 80px;
    font-size: 40px;
    text-align: right;
    pointer-events: none;
    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    border: 1px solid #ccc;
    padding: 5px;
  "></textarea>
  <br><br>
  <button onclick="Addition('1')">1</button>
  <button onclick="Addition('2')">2</button>
  <button onclick="Addition('3')">3</button>
  <br><br>
  <button onclick="clearAll()" style="background: red; color: white;">AC</button>
  <button class="symbol" onclick="del()">del</button>

  <script>
    const output_area = document.getElementById('output-area');
    const initialFontSize = 40; // 初始字号
    const maxLines = 3; // 最多显示行数

    // 计算单行高度
    function getLineHeight() {
      const temp = document.createElement('span');
      temp.style.fontSize = `${initialFontSize}px`;
      temp.style.visibility = 'hidden';
      document.body.appendChild(temp);
      const lineHeight = temp.offsetHeight;
      document.body.removeChild(temp);
      return lineHeight;
    }

    const lineHeight = getLineHeight();
    const maxHeight = lineHeight * maxLines; // 3行对应的最大高度

    function responsiveFont() {
      // 先恢复初始字号，再重新计算是否需要缩小
      output_area.style.fontSize = `${initialFontSize}px`;
      
      // 内容高度超过3行高度时，逐步缩小字号
      while (output_area.scrollHeight > maxHeight && parseInt(output_area.style.fontSize) > 12) {
        const currentSize = parseInt(output_area.style.fontSize);
        output_area.style.fontSize = `${currentSize - 2}px`;
      }
    }

    function Addition(newValue) {
      output_area.value += newValue;
      responsiveFont(); // 添加内容后触发字号调整
    }

    function clearAll() {
      output_area.value = "";
      output_area.style.fontSize = `${initialFontSize}px`; // 清空后恢复初始字号
    }

    function del() {
      output_area.value = output_area.value.slice(0, -1);
      responsiveFont(); // 删除内容后触发字号调整（可能恢复更大字号）
    }

    // 监听手动输入（如果pointer-events设为normal时）
    output_area.addEventListener('input', responsiveFont);
  </script>
</body>
</html>

关键修改点 #

• 替换input为textarea：textarea支持多行文本，通过white-space: pre-wrap和word-wrap: break-word实现自动换行。
• 样式调整：设置resize: none禁止用户调整尺寸，overflow: hidden隐藏滚动条，保持固定外观。
• 重构响应式字体逻辑：
  • 先恢复初始字号，再重新计算是否需要缩小，避免字号一直减小无法恢复。
  • 以3行高度为阈值，逐步缩小字号，同时设置最小字号（12px）防止过小。
  • 在Addition、del函数中主动调用responsiveFont，确保按钮操作内容时也能触发调整。
• 恢复初始字号：清空内容时直接恢复初始字号，提升体验。

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