如何包装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; 
}