make multiple <span> auto break line in a container

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.

p.s. 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

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