动态添加时，Span元素溢出

Question

我正在从输入字段动态添加span元素到div。当他们到达div的右端时。它溢出在同一行。

但是，当span元素的数量预先定义为div元素时，它们不会溢出并且它们会向下并从新行开始。我想这样。

我分析了萤火虫中的元素结构，两者看起来都一样。

这里是演示的小提琴 - 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
}