Question

我的问题如下所示：jsfiddle demo

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

但是，如果我把它们一个一个地放在一起，它们就不会破坏。

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

任何建议都将受到高度赞赏。

P.S。我在我的代码中使用了Jquery和Bootstrap 3.

Answer 1

您可以使span标记的行为与inline-block元素相同。它们将显示inline，但如果它们不适合容器，则会转到下一行。

span{
   display: inline-block !important;
}

<强> Updated JSFiddle

Answer 2

DEMO
由于没有人提到它，我将添加这个：
如果你只是追加 一个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);
});

Answer 3

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

在CSS中添加以下内容：

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

您无需使用!important强制它。
虽然您可以指定最大宽度，但为什么？只需让文字确定宽度。

Updated JSFiddle

Answer 4

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

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

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

在容器中创建多个<span>自动分隔线

4 个答案: