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