Question

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

我需要一种方法，这样无论消息的大小如何，泡泡都会调整大小并包含消息。有点像iMessage和Facebook Messenger。我通过链接＆＃39; li＆＃39;来假设它。 Javascript函数的高度和宽度属性？

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

Answer 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;
}

聊天气泡大小

1 个答案: