3

I want to make a simple calculator-like app. I created a div with an ID of display and three buttons that enter numbers 1,2,3. The numbers are displayed next to each other. However, when they hit the edge of the container they just don't wrap. How to make the entered numbers wrap to the next line? I tried: display: flex; flex-wrap: wrap; but it didn't work. I guess overflow:hidden; doesn't work either because it only hides the content.

  <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}`;
  }
TomDev
  • 285
  • 2
  • 13
  • word-break: break-word has worked horizontally but vertically it still overflow. I guess overflow hidden is the solution and padding. Unless anyone else, can suggest anything? – TomDev Oct 23 '21 at 20:12

1 Answers1

2

Try adding this line to #display (CSS):

word-wrap: break-word;

I hope this is what you mean.

EDIT - reaction: Vertically it overflows, because you defined height as 100px and it can't go bigger. I don't know what exactly you want the text to do after it reaches the end. You can add this to CSS min-height: 100px; height: fit-content; and your #display will distend as you add more numbers. You can also add overflow-y: scroll; and the box won't change its size, it will just add scrollbar. If you can specify, what is expected behaviour of the box when numbers reach the end, I can maybe improve my answer.

Michal Moc
  • 36
  • 4