css - CSS：强制换行使元素保持在一起

Question

我有两个元素必须彼此相邻（输入和按钮）。如果前一个文本变得太长，那么它们都必须被推到下一行。但是，如果它们都可以放在第一行，则不应将它们推到下一行。

<div>
    tag: some words of
    <span>We must stay </span><span>together</span>
</div>

编辑：更新小提琴也显示所需的结果（虽然它使用 br，哪个答案不应该）

http://jsfiddle.net/GSf67/5/

编辑：澄清父项的宽度不得超出其指定的宽度。相反，应该强制换行。

Answer 1

尝试将它们包装在div样式中display:inline-block：

<div class="container">
    tag: some words of
    <div style="display:inline-block">
        <span>We must stay </span><span>together</span>
    </div>
</div>

另一个小提琴：http: //jsfiddle.net/HsZRB/

Answer 2

分叉你的小提琴：http: //jsfiddle.net/7pB2q/

您想将以下内容添加到您的div选择器中：

div {
  white-space: nowrap;
}