Chat bubble size

问题

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

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?

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?

回答1:

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.

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

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

来源：https://stackoverflow.com/questions/25269852/chat-bubble-size