聊天气泡大小

【问题标题】：Chat bubble size聊天气泡大小
【发布时间】：2014-08-12 16:52:29
【问题描述】：

我有一个像聊天室一样工作的网站。我正在使用无序列表来实现它，并且在每条提交的消息后面都有一个聊天气泡来封装它。问题是，每条消息的聊天气泡都保持相同的大小，并且消息溢出气泡，如下所示：http://i.imgur.com/uzzjpQw.jpg

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

现在，在 CSS 中，气泡是通过 :background-image 生成的 A）这是最好的方法吗？ B) 什么 Javascript 会调整每条消息的气泡大小？

【问题讨论】：

css 的 background-size 可以使图像拉伸以适应元素。

标签： javascript css chat message resize-image

【解决方案1】：

气泡不应是背景图片。如今，使用 CSS3 可以轻松实现这样的设计。如果您随后将高度设置为自动（这是默认值），气泡将根据内容进行调整。

这是一个有启发性的例子。您可以编辑最后一个 div 中的文本，以查看更多文本的外观。 http://jsfiddle.net/t9njn2kv/

.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);
}

如果您希望某个人的回复看起来不同，您可以为该消息添加一个替代类。像这样：http://jsfiddle.net/t9njn2kv/3

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

【讨论】：