聊天气泡大小 [英] Chat bubble size

问题描述

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

I have a website which works like a chat room. I'm using an unordered list to achieve it and behind every submitted message is a chat bubble to encase it. The problem is, the chat bubble remains the same size with every message, and messages spill over the bubble as is illustrated here: http://i.imgur.com/uzzjpQw.jpg

我需要一种方式，使得无论消息的大小，气泡大小和包含消息。有点像iMessage和Facebook Messenger。我假设它通过将'li'height和width属性连接到Javascript中的函数？

I need a way so that whatever the size of the message, the bubble resizes and encases the message. A bit like iMessage and Facebook Messenger does. I'm assuming its by linking the 'li' height and width properties to a function in Javascript?

现在，在CSS中，气泡是通过以下方式生成的：background- image
A）这是最好的办法吗？
B）什么Javascript会每个消息调整泡沫大小？

Right now, in the CSS the bubble is generated via :background-image A) Is that the best way to go about it? B) What Javascript would resize the bubble per every message?

推荐答案

泡泡不应该是背景图像。这样的设计可以很容易地与CSS3达到现在。如果您将高度设置为auto（这是默认值），则气泡将根据内容进行调整。

The bubble should not be a background image. Such a design can easily be reached with CSS3 nowadays. If you then set height to auto (which is the default value), the bubble will adjust to the content.

这里有一些灵感的例子。您可以编辑最后一个div中的文本，以查看更多文本将是什么样子。 http://jsfiddle.net/t9njn2kv/

Here is an example with some inspiration. You can edit the text in the last div to see what it would look like with more text. 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

If you want the reply of a person to look different, you can add an alternative class to that message. Like so: http://jsfiddle.net/t9njn2kv/3

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

这篇关于聊天气泡大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！