如何使与JS输入的数字不低于容器，但只是去下一行?

Question

我想做一个简单的类似计算器的应用程序。我创建了一个div, ID为display和三个输入数字1,2,3的按钮。这些数字是挨个显示的。然而，当它们碰到容器的边缘时，它们就不包装了。如何使输入的数字换行到下一行?我试过:显示:flex;flex-wrap:包装;但这并没有奏效。我猜溢出:隐藏;也不能工作，因为它只隐藏内容。

<div id="display"></div>
<div class="keypad">
<button id="btn1" onclick="press1()">1</button>
<button id="btn2" onclick="press2()">2</button>
<button id="btn1" onclick="press3()">3</button>
</div>

#display {
width: 300px;
height: 100px;
background-color: gold;
border: 1px solid black;
}
.keypad {
width: 300px;
height: 100px;
margin: 0 auto;
border: 1px solid orangered;
}
button {
width: 97px;
height: 97px;
border: 0;
outline: 0;
}

let numberEntered = "";
const display = document.querySelector("#display");
console.log(display);
function press1() {
numberEntered = 1;
display.textContent += `${numberEntered}`;
}
function press2() {
numberEntered = 2;
display.textContent += `${numberEntered}`;
}
function press3() {
numberEntered = 3;
display.textContent += `${numberEntered}`;
}

Answer 1

尝试将这一行添加到#display (CSS):

word-wrap: break-word;

我希望这就是你的意思。

编辑-反应:垂直溢出，因为你定义的高度为100px，它不能再大了。我不知道你到底想让文本在结束后做什么。你可以将它添加到CSSmin-height: 100px; height: fit-content;，你的#显示将随着你添加更多的数字而膨胀。你也可以添加overflow-y: scroll;，框不会改变它的大小，它只会添加滚动条。如果你能说明，当数字到达末尾时，框的预期行为是什么，我也许可以改进我的答案。