如何根据里面的文字设置元素的宽度？答案

【问题标题】：How to set element's width according the text inside?如何根据里面的文字设置元素的宽度？
【发布时间】：2013-12-08 01:20:44
【问题描述】：

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

这是我最终得到的屏幕示例：

蓝色气泡是我发来的消息，红色是对方发来的。

我写的一段代码是：

<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 的函数，但我没有成功地改变我想要的宽度......

如果你们中的任何一个可以给我写详细而隐含的说明，那就太好了……

【问题讨论】：

显示 HTML 和 CSS，重现您正在处理的情况。理想情况下也（不是'代替'）显示现场JS Fiddle或类似的演示。
离开我的头顶，我会漂浮：左，清晰：右，反之亦然
嗨，大卫，缺少什么？是否缺乏数据来澄清我的问题？我那里有很多不相关的代码...
我了解我发布信息链接的问题
@Lior jsfiddle.net/K67NN 这就是我的意思

标签： css html angularjs

【解决方案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 只是防止它们堆积在一条线上。

【讨论】：