Quiero hacer una aplicación simple similar a una calculadora. Creé un div con una ID de pantalla y tres botones que ingresan los números 1,2,3. Los números se muestran uno al lado del otro. Sin embargo, cuando golpean el borde del contenedor, simplemente no se envuelven. ¿Cómo hacer que los números ingresados pasen a la siguiente línea? Probé: pantalla: flex; envoltura flexible: envoltura; pero no funcionó. Supongo desbordamiento: oculto; tampoco funciona porque solo oculta el contenido.
<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}`; }Intenta agregar esta línea a #display (CSS):
word-wrap: break-word;Espero que esto sea lo que quieres decir.
EDITAR - reacción: verticalmente se desborda, porque definiste la altura como 100 px y no puede ser más grande. No sé exactamente qué quieres que haga el texto después de que llegue al final. Puede agregar esto a CSS min-height: 100px; height: fit-content; y su #pantalla se dilatará a medida que agregue más números. También puede agregar overflow-y: scroll; y el cuadro no cambiará su tamaño, solo agregará la barra de desplazamiento. Si puede especificar cuál es el comportamiento esperado del cuadro cuando los números llegan al final, tal vez pueda mejorar mi respuesta.