Vigor Vigor - 6 days ago 5
CSS Question

make multiple <span> auto break line in a container

My question is as shown from here: jsfiddle demo

As you can see, the

<span>
element will automatically break line if I put each
<span>
on a new line in the
html
file.

But, if I put them one by one together, they will not break line.

Please Note, why I asked this question is because in my real project, I added the
<span>
from my
js
code dynamically. That will cause the same problem, which is that the
<span>
can't automatically break line, and will add a horizontal scrollbar when the number of them increased.

Any suggestion will be highly appreciated.

p.s. I'm using Jquery and Bootstrap 3 in my code.

Answer

DEMO
Since No body mentioned it I'm going to add this:
If you just append &nbsp; a html space entity or a even a normal space ' ' everything will work.

 $(document).ready(function () {
    var $well = $('<div class="well"/>');
    for(var i=0; i<20; i++){

        var $span = $('<span class="label label-warning"/>');
        $span.html("hello world!");
        $well.append($span);
        //this will work but will add an additional space $well.append(' &nbsp; ');
        $well.append(' ');
    }
    $('body').append($well);
});
Comments