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

Question

我的问题如下所示：jsfiddle demo

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

但是，如果我将它们一一放在一起，它们就不会断线。

请注意，为什么我问这个问题是因为在我的真实项目中，我<span>从我的js代码中动态添加了。那会导致同样的问题，就是<span>不能自动断行，并且当它们的数量增加时会添加一个水平滚动条。

任何建议将不胜感激。

ps 我在我的代码中使用了 Jquery 和 Bootstrap 3。

Answer 1

你可以让你的 span 标签像inline-block元素一样。它们会显示，inline但如果它们不适合容器，它们将转到下一行。

span{
   display: inline-block !important;
}

更新了 JSFiddle。