Javascript jQuery.insertBefore不考虑换行符

我有一个简单的html，带有一个受宽度限制的div。在内部，我有许多

span

标记，它们配置了

nowrap

。我的css：

.content {
    width: 50%;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
.adder {
    color: blue;
    cursor: pointer;
}
.added {
    position: relative;
    white-space: nowrap;
}

和我的html：

<div class="content">
    <span class="added">A text just a little large 1.</span>
    <span class="added">A text just a little large 2.</span>
    <span class="added">A text just a little large 3.</span>
    <span class="added">A text just a little large 4.</span>
    <span class="added">A text just a little large 5.</span>
    <span class="adder">Add</span>
</div>

因此，现在每次单击

Add

时，都会在

Add

文本前放置一个新的

span

但问题是，当我在

Add

中再单击几次时，会出现一个点，即达到行大小的末尾，但是为了像文本的其他部分一样断开行，新的

span

只会在与

div

的边缘重叠的同一行中渲染

为什么会这样？如何避免呢

我正在

谷歌Chrome 42.0.2311.135中测试这个页面

可以在中查看整个html。
您的原始“添加”元素列表
元素之间有空格。您用JavaScript代码添加的代码不会。因此，浏览器不能在它们之间插入换行符-它只能在空白边界处插入换行符

你可以用几种不同的方法来解决这个问题；一种简单的方法是将其添加到“单击”处理程序中：

这种方法不需要对JavaScript进行任何更改。
当您使用
insertBefore
时，在YRU元素之间没有添加任何空间。只需自己添加一个空间，它们就会按照您的预期进行包装：

$(function() {
    $(".adder").click(function() {
        $(document.createElement("span"))
            .addClass("added")
            .html("A custom text to be add,")
            .insertBefore(this)
            .after(" ");  // add a single space
    });
});

为什么要发布无法阅读的压缩HTML？我建议你发布一个链接到一个正在工作的JSFIDLE，这样人们就可以看到你正在谈论的确切问题，也许还可以处理导致问题的原因。但是我不知道有哪个网站允许我在这里发布html。你有网站、存储库、建议吗？你可以把HTML放在你的实际问题中，格式化为可读，而不是压缩成一行。无需外部站点即可共享HTML。事实上，StackOverflow不希望对问题重要的数据的唯一引用是外部链接。所以我想在实际问题中得到这些数据。我只是说你应该把它格式化成可读的，而不是一行。你的答案也是对的，但是另一个人以前的答案是对的+1美元。
$("<span/>", { text: " " }).insertBefore(this);

.added::after {
  white-space: normal;
  content: "\00200B";
}

$(function() {
    $(".adder").click(function() {
        $(document.createElement("span"))
            .addClass("added")
            .html("A custom text to be add,")
            .insertBefore(this)
            .after(" ");  // add a single space
    });
});