jQuery.insertBefore не уважает разрыв строки

Question

У меня есть простой html с div, ограниченным шириной. Внутри у меня есть много span тегов, которые настроены с nowrap. Мой CSS:

.content { 
    width: 50%; 
    margin: 10px; 
    padding: 10px; 
    border: 1px solid black; 
} 
.adder { 
    color: blue; 
    cursor: pointer; 
} 
.added { 
    position: relative; 
    white-space: nowrap; 
} 

И мой HTML:

<div class="content"> 
    <span class="added">A text just a little large 1.</span> 
    <span class="added">A text just a little large 2.</span> 
    <span class="added">A text just a little large 3.</span> 
    <span class="added">A text just a little large 4.</span> 
    <span class="added">A text just a little large 5.</span> 
    <span class="adder">Add</span> 
</div> 

Как и ожидалось, текст разбивается, когда нет больше места в очереди, чтобы быть размещены. Затем весь текст span отображается на следующей строке. Теперь я добавил яваскрипт кода:

$(function() { 
    $(".adder").click(function() { 
     $(document.createElement("span")) 
      .addClass("added") 
      .html("A custom text to be add,") 
      .insertBefore(this); 
    }); 
}); 

Итак, теперь новый span помещается перед Add текстом каждый раз, когда я нажимаю на Add.

Но проблема в том, что, когда я нажимаю еще несколько раз в Add, наступает точка, в которой достигнут конец размера линии, а скорее, чтобы разбить линию, как делает другая часть текста, новый span просто отображается в одной строке, перекрывающей край div.

Почему это происходит? Как этого избежать?

Я тестирую эту страницу в Google Chrome 42.0.2311.135.
Весь html можно посмотреть в jsfinddle.

Answer 1

Когда вы используете insertBefore, между элементами yoru не добавляется пробел. Просто добавьте пробел сами, и они будут заворачивать, как вы ожидаете:

$(function() { 
    $(".adder").click(function() { 
     $(document.createElement("span")) 
      .addClass("added") 
      .html("A custom text to be add,") 
      .insertBefore(this) 
      .after(" "); // add a single space 
    }); 
}); 

http://jsfiddle.net/gtoh8hzp/

Answer 2

Ваш первоначальный список элементов «добавлен» <span> имеет пробел между ними. Те, которые вы добавляете с кодом JavaScript, не поддерживаются. Поэтому браузер не может вставлять разрывы строк между ними —, он будет делать это только на границах пробелов.

Вы можете исправить это несколькими способами; один простой способ, чтобы добавить это к вашему «нажмите кнопку» обработчиком:

$("<span/>", { text: " " }).insertBefore(this); 

Другой способ исправить это с чистым CSS:

.added::after { 
    white-space: normal; 
    content: "\00200B"; 
} 

изменения Нет JavaScript необходимо будет с этим подходом.