How to set element's width according the text inside?

Question

I use CSS speech bubble (http://nicolasgallagher.com/pure-css-speech-bubbles/demo/) in order to implement a chat. This is an example of screen I ended up with: The blue bubble is a message from me and the red is from a counterpart. The piece of code I wrote is: ```

{[{ message.body}]}

``` while {[{ }]} is a symbol of angular parameter. I would like that the width of the bubble will be fit to the length of the text inside. Please pay attention that the message inside one bubble may include several rows so the width needs to fit to the longest row. In addition, the blue bubbles need to be alignment to the right. I tried to insert function for ng-style as function of message.body but I didn't succeed to make the width changed as I wanted... It would be very kind if one of you can write me detailed and implicit in…

Accepted Answer

This works for me: http://jsfiddle.net/K67NN/1/ this is my test html: ```

test1

test2

``` I used the stock css that you linked to, and I just added these to the classes left and right ``` .left{float:left; clear:both} .right {float:right; clear:both} ``` This works because floated elements have implicit width by default and they are aligned to the left or right of their enclosing element. The `clear:both` just keeps them from piling up on one line.

How to set element's width according the text inside?

Solution

Problem