• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

105
Views
¿Cómo hacer que los números ingresados con JS no sobrepasen el contenedor sino que simplemente pasen a la siguiente línea?

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}`; }
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error