javascript - jQuery.insertBefore 不遵守换行符

Question

我有一个简单的 html，其中的 div 受宽度限制。我在里面有许多配置了 nowrap 的 span 标签。我的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>

正如预期的那样，当要放置的行中没有更多空间时，文本被中断。然后整个 span 在下一行呈现。现在我添加了一些 javascript 代码:

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

因此，现在每次我单击 Add 时，都会在 Add 文本之前放置一个新的 span。

但问题是，当我在 Add 中再点击几次时，出现了一个达到行大小末尾的点，而是像另一个一样断开该行部分文本确实如此，新的 span 只是呈现在与 div 边缘重叠的同一行中。

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

我正在 Google Chrome 42.0.2311.135 中测试此页面。
整个html可以在jsfinddle查看.

Answer 1

您原来的“已添加”列表<span>元素之间有空格。您使用 JavaScript 代码添加的那些不会。因此，浏览器无法在它们之间插入换行符——它只会在空白边界处插入。

您可以通过几种不同的方式解决这个问题；一种简单的方法是将其添加到您的“点击”处理程序中:

$("<span/>", { text: " " }).insertBefore(this);

另一种修复方法是使用纯 CSS:

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

使用这种方法不需要更改 JavaScript。