How to set element width according to text inside?

Question

I use the CSS speech bubble ( http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ ) to chat.

This is an example of a screen where I ended up:

The blue bubble is a message from me, and the red is from the counterparty.

The piece of code I wrote is:

<p class="inset list" ng-repeat="message in messages | orderBy:'id'"
ng:class="{ true:'triangle-right right', false:'triangle-right left'}
[message.sender == {{ user }} ]">
{[{ message.body}]}
</p>

while {[{}}} is the symbol of the angular parameter.

I would like the width of the bubble to match the length of the text inside. Please note that the message inside one bubble can contain several lines, so the width should correspond to the longest line.

In addition, blue bubbles should be located on the right.

ng- message.body, , ...

, ...

Answer 1

:

http://jsfiddle.net/K67NN/1/

html:

<p class="triangle-right left">test1</p>
<p class="triangle-right right">test2</p>

css, ,

.left{float:left; clear:both}
.right {float:right; clear:both}

, , . clear:both .