javascript - 動的に追加するとスパン要素がオーバーフローする

Question

入力フィールドから div にスパン要素を動的に追加しています。彼らがdivの右端に達したとき。同じラインでオーバーフローします。

ただし、span 要素の数が div 要素に事前に定義されている場合、それらはオーバーフローせず、下に降りて新しい行から始まります。私はこのようにしたい。

firebug で両方の要素構造を分析しましたが、どちらも同じように見えます。

デモンストレーション用のフィドル - FIDDLE

私がやっている間違いと、回避策があれば教えてください。

Answer 1

spanはインライン要素であるため、HTML の空白の影響を受けます。

定義済みの例では、それぞれの間に改行がありますspan。

JavaScript バージョンを機能させるには、空白を追加する必要があります。

改行を追加します。

$("#box1").append("<span>"+val+"</span>\r\n");

または単なるスペース：

$("#box1").append("<span>"+val+"</span> ");

選択肢は同じですが、改行を入れると意図がより明確になる場合があります。

Answer 2

CSSを追加してみませんか

.span{
display: inline-block
}