css - CSS: 要素をまとめるために改行を強制する

Question

隣同士に配置する必要がある 2 つの要素 (入力とボタン) があります。前のテキストが長くなりすぎた場合は、両方を次の行にプッシュする必要があります。ただし、両方とも最初の行に収まる場合は、次の行にプッシュしないでください。

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