javascript - 动态添加时 Span 元素溢出

Question

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

然而，当 span 元素的数量被预定义到一个 div 元素中时，它们就不会溢出，它们会下降并从新的一行开始。我想要这样。

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

这是演示用的 fiddle - FIDDLE

请让我知道我犯的任何错误以及是否有任何解决方法。

Answer 1

由于 span 是一个内联元素，它会受到 HTML 中空格的影响。

在您的预定义示例中，您在每个 span 之间有一个换行符。

要使您的 JavaScript 版本正常工作，您需要添加一些空格。

添加换行符:

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

或者只是一个空格:

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

选择是等价的，但你的意图可能用换行符更清楚。