Adil.R Adil.R - 6 months ago 24
HTML Question

Auto adjusting <p> tag class according to the input given

I have a speech bubble class which i'm using to show message in a chat box when the user sends it through my chat client.The user enters in the input field but if the user input goes greater than the height or width of the bubble, the message gets out of the bubble.I want to expand the bubble size according to the message given by the user. Any help?

enter image description here

CSS code :

.bubble {
position: relative;
width: 200px;
height: 66px;
padding: 2px;
background: #1e88e5;
font-size: 20px;
color: black;
}

.bubble:after {
content: "";
position: absolute;
bottom: -15px;
left: 41px;
border-style: solid;
border-width: 15px 11px 0;
border-color: #1e88e5 transparent;
display: block;
width: 0;
z-index: 1;
}

Answer

Use min-width instead of width Same for height

It is also good to set max-width and overflow:hidden for the case some enters long line without spaces.