In my simple HTML, I have a div with a limited width. Inside are several span tags styled with nowrap. Here is the CSS:
.content {
width: 50%;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.adder {
color: blue;
cursor: pointer;
}
.added {
position: relative;
white-space: nowrap;
}
Here is the corresponding HTML:
<div class="content">
<span class="added">A slightly long text 1.</span>
<span class="added">A slightly long text 2.</span>
<span class="added">A slightly long text 3.</span>
<span class="added">A slightly long text 4.</span>
<span class="added">A slightly long text 5.</span>
<span class="adder">Add</span>
</div>
When clicking on the 'Add' button, a new span is added before it each time:
$(function() {
$(".adder").click(function() {
$(document.createElement("span"))
.addClass("added")
.html("Custom text to be added,")
.insertBefore(this);
});
});
The issue arises when multiple spans are added and they start overlapping the edge of the div instead of breaking into new lines. How can this be prevented?
This behavior is observed in Google Chrome version 42.0.2311.135.
The full HTML code can be found at this JSFiddle link.