在容器中自动换行多个<span>元素

Question

我的问题如下所示： jsfiddle演示 如您所见，如果我在html文件中将每个放在新行上，元素将自动换行。

但是，如果我将它们一个接一个地放在一起，它们将不会换行。

请注意，我之所以提出这个问题，是因为在我的真实项目中，我会从我的js代码动态添加。这将导致相同的问题，即无法自动换行，并且在数量增加时会添加水平滚动条。

非常感谢您的任何建议。

提示：我在我的代码中使用Jquery和Bootstrap 3。

- Vigor

---

.well span { display:inline-block;} .well span { 显示：内联块; } - Bekim Bacaj

Answer 1

你可以使你的span标签像 inline-block 元素一样工作。它们将以 inline 的方式显示，但如果它们不适合容器，它们将移到下一行。

span{
   display: inline-block !important;
}

已更新的JSFiddle。

- Francisco Romero

---

@Ryad.iv 我认为现在是他需要的东西。之前我误解了他的问题。感谢您的反馈。 - Francisco Romero

Answer 2

是的，您需要将inline-block应用于目标

内的。 但是，您需要声明特定性以确保它仅针对.well容器中的。否则，该类属性的所有都将受到网页上的影响。

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

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

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

已更新的JSFiddle

- hellofromTonya

Answer 3

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

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

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

- Yuri Pereira

Answer 4

演示
由于没有人提到，我要补充一下：
如果你只是添加一个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);
});

- Ryad Boubaker