html - 如何包装 div 的大小以最适合内容，比如在 Facebook Chat 上？

Question

这是我想要达到的效果:

这是一条 Facebook 聊天消息，请注意元素的宽度是如何严格基于其文本内容的。

如果我改变我写在里面的文字，<div> 的大小变化:

我正在尝试使用以下布局做同样的事情:

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

和 CSS:

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

但这就是我得到的(作为一个基本示例):https://jsfiddle.net/dr76t4t7/

如何制作 <div>更适合里面的文字内容？

Answer 1

您缺少 display: inline-block 和 padding。

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