动态添加时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 
} 

如何