Wrapping text (numbers) to expand a div-CodePudding

I am currently learning HTML, CSS and JS, for my first project I am working on making a basic calculator using these languages and so far I have almost completed the UI of the calculator. It looks like this so far:

Image of calculator display (sorry I still cant posts pictures directly with questions)

My question is: that say the user inputs a large number, I want the display to expand and have the number split across 2 lines, but no matter what I have tried I can't seem to get it working. (I have tried: word-wrap: breakword, word-break: break-all, overflow-wrap: break-word etc.)

What the display looks like when a large number is hardcoded to appear

How I want large numbers to appear on the display (a screenshot from someone else's calculator)

Can anyone help me figure this out.

My code:

* {
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: "calcFont";
    src: url(./Calculator.ttf);
}

.main-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.body {
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-color: #ccc5be;
    min-height: 40vh;
    width: 20%;
    border-radius: 20px;
    padding: 30px 40px;
    min-width: 300px;
}

.display {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #ebe6e1;
    height: 100px;
    border-radius: 20px;
    padding: 0 15px;
    word-wrap: break-word;
}

.buttons-container {
    width: 100%;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: stretch;
    gap: 10px;
}

.row {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;
    border-radius: 5px;
    text-align: center;
    font-family: Helvetica;
    color: white;
    transition: all 0.2s ease-in-out;
    flex-grow: 1;
}

.number {
    /* background-color: #00b3ff; */
    background-image: linear-gradient(to bottom left, #7ad7ff, #00b3ff);
}

.action {
    background-color: #d16f24;
}

.operation {
    background-color: black;
}

.button:hover {
    /* background-color: white; */
    background-image: linear-gradient(to bottom left, white, rgb(231, 231, 231));
}

.button.number:hover {
    color: #00b3ff;
}

.button.operation:hover {
    color: black;
}

.button.action:hover {
    color: #d16f24;
}

.display-text {
    /* white-space: normal; */
    font-family: "calcFont", Helvetica;
    font-size: 40px;
}

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>MY CALC</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="calc.css" />
  </head>
  <body>
    <div >
      <div >
        <div >
          <h2 >7,000000000145,236,450</h2>
        </div>

        <div >
          <div >
            <div >7</div>
            <div >8</div>
            <div >9</div>
            <div >DEL</div>
            <div >AC</div>
          </div>
          <div >
            <div >4</div>
            <div >5</div>
            <div >6</div>
            <div >X</div>
            <div >÷</div>
          </div>
          <div >
            <div >1</div>
            <div >2</div>
            <div >3</div>
            <div > </div>
            <div >-</div>
          </div>
          <div >
            <div >0</div>
            <div >.</div>
            <div >=</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

I haven't actually added any JS yet because I'm just trying to make sure the UI is good first then I'll move on to it.

Any help would be much appreciated. Thanks!

CodePudding user response：

You can try word-break: break-all; this break the numbers into a separate when overflowed

* {
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: "calcFont";
    src: url(./Calculator.ttf);
}

.main-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.body {
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-color: #ccc5be;
    min-height: 40vh;
    width: 20%;
    border-radius: 20px;
    padding: 30px 40px;
    min-width: 300px;
}

.display {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #ebe6e1;
    height: 100px;
    border-radius: 20px;
    padding: 0 15px;
    word-wrap: break-word;
}

.buttons-container {
    width: 100%;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: stretch;
    gap: 10px;
}

.row {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;
    border-radius: 5px;
    text-align: center;
    font-family: Helvetica;
    color: white;
    transition: all 0.2s ease-in-out;
    flex-grow: 1;
}

.number {
    /* background-color: #00b3ff; */
    background-image: linear-gradient(to bottom left, #7ad7ff, #00b3ff);
}

.action {
    background-color: #d16f24;
}

.operation {
    background-color: black;
}

.button:hover {
    /* background-color: white; */
    background-image: linear-gradient(to bottom left, white, rgb(231, 231, 231));
}

.button.number:hover {
    color: #00b3ff;
}

.button.operation:hover {
    color: black;
}

.button.action:hover {
    color: #d16f24;
}

.display-text {
    /* white-space: normal; */
    font-family: "calcFont", Helvetica;
    font-size: 40px;
word-break: break-all;
}

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>MY CALC</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="calc.css" />
  </head>
  <body>
    <div >
      <div >
        <div >
          <h2 >7,000000000145,236,450</h2>
        </div>

        <div >
          <div >
            <div >7</div>
            <div >8</div>
            <div >9</div>
            <div >DEL</div>
            <div >AC</div>
          </div>
          <div >
            <div >4</div>
            <div >5</div>
            <div >6</div>
            <div >X</div>
            <div >÷</div>
          </div>
          <div >
            <div >1</div>
            <div >2</div>
            <div >3</div>
            <div > </div>
            <div >-</div>
          </div>
          <div >
            <div >0</div>
            <div >.</div>
            <div >=</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

You can use word-wrap: anywhere; to achieve this effect.

* {
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: "calcFont";
    src: url(./Calculator.ttf);
}

.main-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.body {
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-color: #ccc5be;
    min-height: 40vh;
    width: 20%;
    border-radius: 20px;
    padding: 30px 40px;
    min-width: 300px;
}

.display {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #ebe6e1;
    height: 100px;
    border-radius: 20px;
    padding: 0 15px;
    word-wrap: break-word;
}

.buttons-container {
    width: 100%;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: stretch;
    gap: 10px;
}

.row {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;
    border-radius: 5px;
    text-align: center;
    font-family: Helvetica;
    color: white;
    transition: all 0.2s ease-in-out;
    flex-grow: 1;
}

.number {
    /* background-color: #00b3ff; */
    background-image: linear-gradient(to bottom left, #7ad7ff, #00b3ff);
}

.action {
    background-color: #d16f24;
}

.operation {
    background-color: black;
}

.button:hover {
    /* background-color: white; */
    background-image: linear-gradient(to bottom left, white, rgb(231, 231, 231));
}

.button.number:hover {
    color: #00b3ff;
}

.button.operation:hover {
    color: black;
}

.button.action:hover {
    color: #d16f24;
}

.display-text {
    font-family: "calcFont", Helvetica;
    font-size: 40px;
    word-wrap: anywhere;
}

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>MY CALC</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="calc.css" />
  </head>
  <body>
    <div >
      <div >
        <div >
          <h2 >7,000000000145,236,450</h2>
        </div>

        <div >
          <div >
            <div >7</div>
            <div >8</div>
            <div >9</div>
            <div >DEL</div>
            <div >AC</div>
          </div>
          <div >
            <div >4</div>
            <div >5</div>
            <div >6</div>
            <div >X</div>
            <div >÷</div>
          </div>
          <div >
            <div >1</div>
            <div >2</div>
            <div >3</div>
            <div > </div>
            <div >-</div>
          </div>
          <div >
            <div >0</div>
            <div >.</div>
            <div >=</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>