用於文本長度的CSS可伸縮聊天氣泡？

Question

我在創建基於聊天泡泡文本大小增大/縮小的可縮放div時遇到問題。一個很好的例子是Messenger或Facebook聊天使用的聊天泡泡。

.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>

我能得到它的最大尺寸，但我不能讓泡沫環繞文本的相對大小。

Answer 1

.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>

Answer 2

或者您可以使用display:inline-block或float:left和clear:both，如果你想他們在彼此的頂部。

.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 3

爲了更好地聊天般的佈局，你可以去這個片段：

更新

添加箭頭也將爲更好的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 4

所有你需要的是display要設置inline或inline-block。看到這個。 `用於purporse即是一個明顯的`直列block`;表單元：

.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>