我有一个简单的 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查看.
最佳答案
您原来的“已添加”列表<span>
元素之间有空格。您使用 JavaScript 代码添加的那些不会。因此,浏览器无法在它们之间插入换行符——它只会在空白边界处插入。
您可以通过几种不同的方式解决这个问题;一种简单的方法是将其添加到您的“点击”处理程序中:
$("<span/>", { text: " " }).insertBefore(this);
另一种修复方法是使用纯 CSS:
.added::after {
white-space: normal;
content: "\00200B";
}
使用这种方法不需要更改 JavaScript。
关于javascript - jQuery.insertBefore 不遵守换行符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30008448/