How to keep the size of a box constant?

Question

Hi, i am trying to keep the size of this box below constant, ss that it does not changes no mater how many texts i put in.

.card {
padding:10px;
font-family: arial;
font-size: 20px;
text-align: justify;
color: black;
background-color: white;
border-radius: 40px;
box-shadow: 20px 20px 50px grey;
box-sizing: inherit;
width:90%;
margin:auto;

}

Answer 1

don't use % for width and height. use px

Answer 2

You can add:
overflow:scroll;

It will allow text to be scrolled, if there is overflow(if text can't fit container)

Answer 3

I used p tag to test, but you probably have div or something.

Use next code:
overflow:scroll;
word-break:break-word;

Overflow will stop text to go outside of container vertically

Word-break: break-word will break word so it goes in new line and don't overflow horizontally
or test some other values for word-break

If you have nested elements inside this card, set its width to 100%(width of children), this will make children not go outside of parent horizontally.

More about it:
https://www.w3schools.com/cssref/css3_pr_word-wrap.php
https://www.w3schools.com/css/css_overflow.asp

Answer 4

I agree with PanicS, it's probably a word-break issue.

if your words are very long and your box is small, you might have to use:
word-break:break-all;

from mdn web docs_, it seems like word-break: break-word is deprecated.
suggested to use:

word-break: normal;
overflow-wrap: anywhere;

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

Answer 5

Can you post your html code also?
overflow should don't allow text to go outside of container, you used it in your code and you said it is not working.

please use "+" to add code, then we can test it in editor

Answer 6

Thanks for replying PanicS .
Its not working, like i want a stable box inside which i can put texts. And i think overflow will work only if my box is like in a constant dimension/size. I don't know if i have done something wrong, but it keeps expanding as i type down more texts.😅

Answer 7

Bob_Li thanks for the idea.

So finally i got a box of constant size, but i wanted the same in windows too but lets ignore that.
But the extra texts goes outside of the box.
Here is my code

.card {
padding:10px;
font-family: arial;
font-size: 20px;
text-align: justify;
color: black;
background-color: white;
border-radius: 40px;
box-shadow: 20px 20px 50px grey;
box-sizing: inherit;
width:320px;
height: 550px;
margin:auto;
overflow: scroll;

}

Please help

Answer 8

Use the max-width property

Answer 9

Ok u can use p tags