CSS scalable chat bubble for text length? - html

Question

I am having trouble creating a scalable div that increases/decreases in size based on the size of the text in the chat bubble. A good example is the chat bubble that messenger or facebook chat uses.
.left-chat-bubble{
background-color:gray;
padding:10px;
border-radius:40px;
max-width:300px;
}
<div class="left-chat-bubble-wrap">
<div class="left-chat-bubble">
<p>hello</p>
</div>
</div>
I can get it to the its maximum size but I cant get the bubble to wrap around the relative size of the text.

Answer 1

All you need is display to be set inline or inline-block. See this.
.left-chat-bubble{
display: inline-block;
background-color:gray;
padding:10px;
border-radius:40px;
max-width:300px;
}
<div class="left-chat-bubble-wrap">
<div class="left-chat-bubble">
<p>hello</p>
</div>
</div>

Answer 2

For a better chat-like layout you can go for this snippet:
Update
adding arrows will also useful for a better UI.
.msg-list {
width: 100%;
}
.messenger-container {
padding: 8px 15px 8px 13px;
margin: 0 0 25px 35px;
float: left;
max-width: 82%;
background: #f2f2f2;
border-radius: 10px;
min-width: 20%;
position: relative; box-sizing: border-box;
box-shadow: 7px 10px 6px -5px #BBC0C7;
}
.messenger-container p {
color: #3D3D3D;
font-size: 12px;
margin-bottom: 6px;
line-height: 18px;
word-wrap: break-word; margin: 0;
}
.sender .messenger-container {
float: right;
margin-right: 35px;
width: auto;
background: #D5DBFF;
margin-left: 0px;
padding: 8px 15px 8px 13px;
}
.clear {
clear:both;
width: 100%;
padding: 0px !important;
margin: 0px;
height:0px;
}
.messenger-container::before {
width: 0px;
height: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right:15px solid #f2f2f2;
content: "";
position: absolute;
top: 9px;
left: -15px;
}
.sender .messenger-container::before {
width: 0px;
height: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 15px solid #D5DBFF;
content: "";
position: absolute;
top: 9px;
left: 99%;border-right: none;
}
<div class="msg-list">
<div class="messenger-container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
<div class="clear"></div>
<div class="msg-list sender">
<div class="messenger-container">
<p>Lorem Ipsum</p>
</div>
</div>
<div class="clear"></div>
<div class="msg-list">
<div class="messenger-container">
<p>Lorem Ipsum is simply dummy text</p>
</div>
</div>
<div class="clear"></div>
<div class="msg-list sender">
<div class="messenger-container">
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
<div class="clear"></div>

Answer 3

Or you can use either display:inline-block or float:left and clear:both if you want them on top of each other.
.left-chat-bubble{
clear:both;
float:left;
background-color:gray;
padding:10px;
border-radius:40px;
max-width:300px;
}
<div class="left-chat-bubble-wrap">
<div class="left-chat-bubble">
<p>hello, this is a chat bubble</p>
</div>
<div class="left-chat-bubble">
<p>hello, this is a chat bubble with text that wraps onto multiple lines</p>
</div>
</div>

Answer 4

.left-chat-bubble{
background-color:gray;
padding:10px;
border-radius:40px;
display:table-cell;
}
<div class="left-chat-bubble-wrap">
<div class="left-chat-bubble">
<p>hello with more text</p>
</div>
</div>