How do I stop the div expanding to accommodate text?

HTML-CSS
1

Hi there,

I’ve come to the end of my calculator project (I hope!) except for one last thing. If I type in enough numbers, it will cause the calculator screen to expand, which is undesired. I’ve tried things like text-overflow, white-space, nowrap with no success, though maybe I’m using them wrong.

If anyone could steer me in the right direction, I would appreciate it.

2

You could try adding a width element to #screen2

1 Like
4

Thanks for your response, I set the width of #screen2 to 100%, but it doesn’t seem to have worked. :frowning: Do you have any other suggestions?

5

Once the div size is set it should stop expanding, but you might still get an overflow issue.
Could try setting the size div and then set an overflow tag to the text. I think if you add something like overflow:none etc. to an element that is inside a div thats not a fixed size, it just starts stretching the div when it hits the edge. If that makes any sense and if Im not completely wrong.

1 Like
6

The div is expanding even with the width of #screen2 set. I suspect having it display as a table cell inside a table could be causing the problem but I’m not sure.

7

I’ve managed to get the div to stop expanding with table-layout : fixed and I’ve also applied overflow : hidden, which is working. If I can find away to get text-overflow to work so I can use ellipsis that would be the ideal scenario for me.

8

Got ellipsis working by creating a div inside and styling it as

#screen1-inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

So mission accomplished!

@Andy-Roberts Thanks for the assistance.

1 Like