Html 如何防止与浮点相邻的长内联块元素移动到新行？

看这把小提琴：

我有一个评论列表，我想显示为“气泡”

但是，如果一条信息很长，泡沫就会在下一行出现。我怎样才能使信息保持在同一条线上

---

我无法设置气泡的最大宽度，因为我需要它是流体。

只需添加

空白：nowrap和
右边距：47px至
。项目

（47px为5px原始边距+42px浮动img宽度）

和
空白：正常至
。气泡

演示：

说明：空白处：nowrap上的code>。item
阻止内联元素（包括内联块）换行到下一行。
空白
由元素的子元素继承，因此必须将
空白：normal.bubble
，使其文本在其宽度内具有正常的环绕。
这将是您想要的

.item {
    margin : 5px;
    margin-bottom:10px;
    clear:both;    
}
.bubble {
    padding: 8px;
    background: #DBE8F9;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-left: 65px;
    display: table-cell;
}
.item img {
    float: left;
    display: table-cell;
    height:42px;
    width:42px;
    margin-right: 5px;
    background-color:gray;
}

您开发的浏览器是什么？IE7和最近的浏览器这实际上是一种情况，在这种情况下，使用
表
可能不是件坏事。一列用于图像，另一列用于消息。拥有
空白：nowrap
将解决新行问题，但它也会导致消息作为一行继续运行。表布局解决方案确实很简单。但1995年的表格如此；）。谢谢你让它向右溢出。“我需要看看泡沫。它仍然有点溢出。”西尔文：当然，我在答案中添加了解释。不完全是这样。现在泡沫比需要的更大。
.bubble {
    display:inline-block;
}
.item img {
    float:left;
}

.item {
    margin : 5px;
    margin-bottom:10px;
    clear:both;    
}
.bubble {
    padding: 8px;
    background: #DBE8F9;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-left: 65px;
    display: table-cell;
}
.item img {
    float: left;
    display: table-cell;
    height:42px;
    width:42px;
    margin-right: 5px;
    background-color:gray;
}