Javascript 聊天泡泡大小

我有一个像聊天室一样工作的网站。我使用一个无序列表来实现它，每个提交的消息后面都有一个聊天泡泡来封装它。问题是，每条消息的聊天泡泡大小保持不变，消息溢出泡泡，如下所示：

我需要一种方法，无论消息大小如何，气泡都会调整大小并封装消息。有点像iMessage和Facebook Messenger。我是通过将“li”高度和宽度属性链接到Javascript中的函数来假设它的

现在，在CSS中，气泡是通过：背景图像生成的 A） 这是最好的办法吗？

---

B） 什么Javascript会根据每条消息调整气泡的大小？

气泡不应该是背景图像。如今，CSS3很容易实现这种设计。如果随后将“高度”设置为“自动”（默认值），则气泡将根据内容进行调整

下面是一个有一些启发的例子。您可以编辑最后一个div中的文本，以查看更多文本的外观

如果希望某人的回复看起来不同，可以向该消息添加另一个类。像这样：

---

气泡不应是背景图像。如今，CSS3很容易实现这种设计。如果随后将“高度”设置为“自动”（默认值），则气泡将根据内容进行调整

下面是一个有一些启发的例子。您可以编辑最后一个div中的文本，以查看更多文本的外观

如果希望某人的回复看起来不同，可以向该消息添加另一个类。像这样：

---

css的背景大小可以使图像拉伸以适合元素。css的背景大小可以使图像拉伸以适合元素。

.bubble {
    margin: 10px 12px 6px;
    padding: 4px 8px 8px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3), inset 0 -4px 0 rgba(0, 0, 0, 0.12);
    background: #F7D93B;
    border-radius: 8px;
    max-width: 240px;
    text-shadow: 0 2px rgba(0, 0, 0, 0.12);
}

.bubble.alternative {
    background: #4AB1F5;
    float: right;
}