<span>在容器中</span>制作多个<span>自动中断线</span>

Question

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.

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

Answer 1

You can make your span tags acts like inline-block elements. They will display inline but if they does not fit on the container they will go to the next line.

span{
   display: inline-block !important;
}

Updated JSFiddle .

Answer 2

DEMO
Since No body mentioned it I'm going to add this:
If you just append   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);
});

Answer 3

Yes, you do need to apply an inline-block to the spans within the targeted div . You'll want to declare the specificity though to ensure that it only targets the spans within the .well container. Else, all of the spans with that class attribute will be affected on the web page.

In your CSS, add the following:

.well span.label {
  display: inline-block;  
}

• You do not need to force it with an !important .
• While you can specify a maximum width, why would you? Just let the text determine the width.

Updated JSFiddle

Answer 4

Use the property display:inline-block and set max-width to your span.

https://jsfiddle.net/oubgpy8m/16/

.label{
  display: inline-block !important;
  width: 120px;
  margin:5px;
}