如何让JS输入的数字不溢出容器而是自动换行？

云上老周

2026-9-29

解决方案

失效原因

你给#display设置display: flex; flex-wrap: wrap不生效的核心原因是：flex容器的换行规则仅作用于直接子元素，而你当前往容器里插入的是纯文本内容，没有可被识别的flex子项，所以换行规则不会触发。

可选方案

方案1：纯文本场景，直接用文本换行属性（最简便）

不需要修改JS逻辑，仅给#display新增文本换行相关的CSS属性即可，适合仅需要展示数字的简易场景：

#display {
  width: 300px;
  height: 100px;
  background-color: gold;
  border: 1px solid black;
  /* 新增文本换行属性 */
  word-wrap: break-word;
  word-break: break-all;
  /* 可选配置：和常规计算器一样让数字右对齐、靠底部展示 */
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px;
  box-sizing: border-box;
  font-size: 24px;
}

方案2：需要单独操作每个数字，用flex布局实现

如果后续需要对单个数字做样式修改、回退删除等操作，可以把每个数字封装成独立的span子元素，这时候flex-wrap就能正常生效：

修改#display的CSS：

#display {
  width: 300px;
  height: 100px;
  background-color: gold;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  /* 对齐配置，可按需调整 */
  align-content: flex-end;
  justify-content: flex-end;
  padding: 10px;
  box-sizing: border-box;
  font-size: 24px;
}

修改JS插入逻辑：

let numberEntered = "";
const display = document.querySelector("#display");

function press1() {
  numberEntered = 1;
  const numEl = document.createElement('span');
  numEl.textContent = numberEntered;
  display.appendChild(numEl);
}

// press2、press3按照press1的逻辑修改即可