在容器中制作多个 自动换行

Question

我的问题如下所示：jsfiddle demo

如您所见，如果我将每个  放在 html 文件中的新行中， 元素将自动换行。

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

请注意，我之所以问这个问题是因为在我的真实项目中，我从 js 代码中动态添加了 。那样会造成同样的问题，就是不能自动换行，增加个数就会增加一个水平滚动条。

任何建议将不胜感激。

p.s。我在代码中使用 Jquery 和 Bootstrap 3。

Answer 1

您可以使 span 标签的行为类似于 inline-block 元素。它们将显示 inline，但如果它们不适合容器，它们将转到下一行。

span{
   display: inline-block !important;
}

Updated JSFiddle.

Answer 2

使用属性 display:inline-block 并将 max-width 设置为您的跨度。

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

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

Answer 3

DEMO
由于没有人提到它，我要添加这个：
如果你只是附加   一个 html space 实体或者一个普通的 space ' ' 一切都会起作用。

 $(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 4

是的，您确实需要对目标 div 内的跨度应用 inline-block。不过，您需要声明特异性以确保它仅针对 .well 容器内的跨度。否则，网页上所有具有 class 属性的 spans 都会受到影响。

在您的 CSS 中，添加以下内容：

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

您不需要用 !important 强制它。
虽然您可以指定最大宽度，但为什么要指定？让文字决定宽度就可以了。

Updated JSFiddle

在容器中制作多个 <span> 自动换行

make multiple <span> auto break line in a container

javascript

css

inline