Javascript 制作多个<；span>；容器中的自动换行

我的问题如下所示：

如您所见，

元素将自动断行，如果我将每个

放在

html

文件的新行上

但是，如果我把它们一个接一个地放在一起，它们就不会断线

请注意，我之所以问这个问题是因为在我的实际项目中，我动态地从我的

js

代码中添加了

。这将导致相同的问题，即

不能自动断线，并且当它们的数量增加时将添加一个水平滚动条

如有任何建议，将不胜感激

---

p、 我在代码中使用Jquery和bootstrap3。

您可以使span标记的行为类似于

内联块

元素。它们将显示

inline

，但如果它们不适合容器，则将转到下一行

span{
   display: inline-block !important;
}

---

使用属性

显示：内联块

并将

最大宽度

设置为您的跨度

由于没有人提到这一点，我要补充一点：
如果您只是附加了一个html空间实体，甚至是一个普通的空间

'

，一切都会正常工作

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

$（文档）.ready（函数（）{
变量$well=$（''）；
对于（var i=0；i是的，您确实需要将
内联块
应用于目标
div
中的跨距。不过，您需要声明特异性，以确保它仅针对
容器中的跨距。否则，具有该类属性的所有
跨距
都将在网页上受到影响

在CSS中，添加以下内容：

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


您不需要使用
！important
强制执行
虽然可以指定最大宽度，但为什么要这样做？只需让文本确定宽度即可

@Ryad.iv我想现在正是他需要的。在我误解他的问题之前。谢谢你的反馈。{display:inline block；}
.well span.label {
  display: inline-block;  
}