如何包裝div的大小以最適合內容，如在Facebook聊天？

Question

這是我想達到的效果：

這是一個Facebook聊天消息，請注意元素的寬度是嚴格根據各地的文本內容。

如果我改變我寫裏面的文字，對<div>的大小而變化：

我試着用以下的佈局同樣的事情：

<div>Test message that goes ontothenextline</div> 

和CSS：

div { 
    max-width: 190px; 
    // other arbitrary styles 
} 

但這是wh在我得到（作爲一個基本的例子）：https://jsfiddle.net/dr76t4t7/

我怎樣才能使<div>更適合文本內的內容？

Answer 1

您缺少display: inline-block和填充。

.speech-bubble { 
    display: inline-block; 
    max-width: 190px; 
    background-color: #e1edff; 
    border: 1px solid #bdc7d6; 
    color: #4f5359; 
    text-shadow: 1px 1px 0 #fff; 
    padding: 8px 12px; 
    box-sizing: border-box; 
    border-radius: 15px 0 15px 15px; 
} 

https://jsfiddle.net/q35qmkgx/3/

Answer 2

試試這個https://jsfiddle.net/q35qmkgx/7/

div { 
    background-color: blue; 
    color: white; 
    display:inline-block; 
    max-width:190px; 
    padding:5px; 
    word-break:break-all; 
}