如何根据里面的文字设置元素的宽度?

时间:2013-12-07 16:24:45

标签: css html5 angularjs

我使用CSS语音泡泡(http://nicolasgallagher.com/pure-css-speech-bubbles/demo/) 为了实现聊天。

这是我最终获得的屏幕示例:

enter image description here

蓝色泡泡是来自我的信息,红色来自对方。

我写的代码是:

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

而{[{}}}是角度参数的符号。

我希望气泡的宽度适合里面文字的长度。 请注意,一个气泡内的消息可能包含多行,因此宽度需要适合最长的行。

此外,蓝色气泡需要与右侧对齐。

我尝试将ng-style的函数作为 message.body 的函数插入但是我没有按照我的意愿改变宽度......

如果你们中的一个人可以给我详细而隐含的指示,那将是非常友好的......

1 个答案:

答案 0 :(得分:6)

这对我有用:

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

jsfiddle screenshot

这是我的测试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只是让他们不会堆积在一条线上。