jQuery.insertBefore不尊重换行符

Question

我有一个简单的html，其div受宽度限制。我在内部有许多* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 个标签，这些标签配置了span。我的css：

nowrap

我的HTML：

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

正如预期的那样，当要放置的行中没有更多空间时，文本会被破坏。然后在下一行渲染整个<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> 。现在我添加了一些javascript代码：

span

因此，现在每次点击$(function() { $(".adder").click(function() { $(document.createElement("span")) .addClass("added") .html("A custom text to be add,") .insertBefore(this); }); }); 时，span文本都会放在Add之前。

但问题是这样的，当我在Add中再点击几次时，会出现一个点到达行的末尾，而不是将该行作为其他部分。文本可以，新的Add只是在与span边缘重叠的同一行中呈现。

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

我正在div中测试此页面 整个html可以在jsfinddle中查看。

Answer 1

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

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

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

另一种解决方法是使用纯CSS：

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

使用该方法不需要进行任何JavaScript更改。

Answer 2

使用insertBefore时，yoru元素之间没有空格。只需自己添加一个空间，它们就会按照您的期望进行包装：

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

http://jsfiddle.net/gtoh8hzp/