javascript - make multiple <span> auto break line in a container - Stack Overflow

admin管理员组

文章数量:1344533

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.

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.

• javascript
• css
• inline

Share Improve this question Follow edited Nov 26, 2016 at 14:35 Vigor asked Nov 26, 2016 at 14:22 VigorVigor 1,75433 gold badges2828 silver badges4848 bronze badges 1

• .well span { display:inline-block;} – Bekim Bacaj Commented Nov 26, 2016 at 16:56

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

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.

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

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);
});

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

https://jsfiddle/oubgpy8m/16/

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

本文标签： javascriptmake multiple ltspangt auto break line in a containerStack Overflow