Vigor Vigor - 1 year ago 65
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

element will automatically break line if I put each
on a new line in the

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
from my
code dynamically. That will cause the same problem, which is that the
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 Source

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!");
        //this will work but will add an additional space $well.append(' &nbsp; ');
        $well.append(' ');
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download