gpt4 book ai didi

javascript - 如何让用JS输入的数字不溢出容器而是跳到下一行?

转载 作者:行者123 更新时间:2023-12-04 14:47:48 26 4
gpt4 key购买 nike

<分区>

我想制作一个简单的类似计算器的应用程序。我创建了一个带有显示 ID 和三个输入数字 1、2、3 的按钮的 div。数字彼此相邻显示。然而,当它们碰到容器的边缘时,它们就不会包裹起来。如何让输入的数字换行到下一行?我试过:显示:flex; flex 包装:包装;但它没有用。我想溢出:隐藏;也不起作用,因为它只隐藏了内容。

  <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}`;
}

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com