1

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

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

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

4

1 回答 1

4

气泡不应是背景图像。如今，使用 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;
}
于 2014-08-12T16:57:14.630 回答