如何在浮动跨度[包括图表]内将浮动跨度包裹在另一个浮动跨度下面？

Question

我有一个新闻源/聊天框。每个条目包含两个跨度：#user和#message。我希望#user向左浮动，而#message向左浮动。如果#message导致行超出容器宽度，则#message应该包含在#user下面，如下图所示。

默认情况下，如果#user不适合同一行，则#message完全跳转到#user下方。 我已经尝试了空白：nowrap在每个元素上，但似乎也没有做到这一点。

帮助？

Answer 1

也许我错过了一些东西，但如果两个元素都是display:inline，这应该可以解决#message完全在#user下面的问题。不需要漂浮任何东西。

演示（不多见）：http://jsfiddle.net/YK3R9/

随意使用语义标记而不是跨度和div，我只是将它们用于演示。

如果您需要消息上的边框来显示它在绘图中的方式，请说明。我不确定它是视觉辅助还是你想要渲染的方式。当消息跨越多行时，简单地向元素添加边框看起来有点奇怪，因此我们可能需要辅助跨度。

编辑：看到边框无关紧要。

故事的道德：此处不需要float。