делают в контейнере

Question

Мой вопрос, как показано здесь: jsfiddle demo

Как вы можете видеть, <span> элемент будет автоматически разорвать линию, если я ставлю каждый <span> на новую строку в файле html ,

Но, если я поместил их один за другим вместе, они не сломаются.

Обратите внимание, почему я задал этот вопрос, потому что в моем реальном проекте я добавил динамический код <span> из моего js. Это вызовет ту же проблему, которая заключается в том, что <span> не может автоматически сломать линию и добавит горизонтальную полосу прокрутки, когда число их увеличится.

Любое предложение будет высоко оценено.

p.s. Я использую Jquery и Bootstrap 3 в своем коде.

Answer 1

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 2

Вы можете сделать теги span действительными как inline-block элементов. Они будут отображать inline, но если они не помещаются в контейнер, они перейдут к следующей строке.

span{ 
    display: inline-block !important; 
} 

Updated JSFiddle.

Answer 3

Используйте display:inline-block и установите max-width на свой пролет.

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

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

Answer 4

Да, вам нужно применить inline-block к пролетам в целевой div. Вы хотите заявить о своей специфичности, но для того, чтобы убедиться, что он предназначен только для пролетов в контейнере .well. Кроме того, на странице будет затронуто все spans с этим атрибутом класса.

В вашем CSS, добавьте следующее:

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

• Вам не нужно, чтобы заставить его с !important.
• Пока вы можете указать максимальную ширину, почему бы вам? Просто пусть текст определит ширину.

Updated JSFiddle