Вставка элемента в div потерянные свойства переноса слов - PullRequest
Новая
       59

Вставка элемента в div потерянные свойства переноса слов

0 голосов
/ 16 октября 2018

У меня проблема с попыткой динамического изменения содержимого элемента DIV.DIV содержит ряд элементов, и я хочу, чтобы последний клон изменил некоторую информацию. 

function add_ele_wrong(id){
  var id_c = 'c'+id;
  var id_n = 'c'+(id+1);
  $('#'+id_c+'f1').parent().after( $('#'+id_c+'f1').parent().clone()[0].outerHTML.replace(RegExp(id_c, 'g'),id_n) );
}

function add_ele(id){
  var id_c = 'c'+id;
  var id_n = 'c'+(id+1);
  $('#'+id_c+'f1').parent().after( '&nbsp'+$('#'+id_c+'f1').parent().clone()[0].outerHTML.replace(RegExp(id_c, 'g'),id_n) );
}
#container {
  display: inline-block;
  width: 50%;
  border: 1px solid black;
  word-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container >
  <span id=c1 class=chapter style="white-space:nowrap;" >
    <span id="c1f1" onClick="add_ele(1);">These work 1</span>
    &nbsp;-&nbsp;
    <span id="c1f2" onClick="add_ele_wrong(1);">These don't work 2</span>
  </span>
  <span id=c2 class=chapter style="white-space:nowrap;" >
    <span id="c2f1" onClick="add_ele(2);">These work 3</span>
    &nbsp;-&nbsp;
    <span id="c2f2" onClick="add_ele_wrong(2);">These don't work 4</span>
  </span>
</div>

«Исходные» отрезки глав остаются внутри div после ограничения ширины, но когда я добавляю новый «c3», он остается »связан с c2, не оборачивая (и выходя в div), и то же самое для c4 и т. д.

Я использую какую-то неправильную инструкцию CSS или JQ?

Спасибо за предложения.

РЕДАКТИРОВАТЬ.Благодаря misorude я решил проблему, и, следуя его предложению, я изменил вопрос о вставке сниппета с правильным и неправильным решением.

EDIT 2. Я обнаружил, что если вы этого не сделаетеЕсли вы хотите вставить пробел между элементами, вы должны установить свойства отображения элементов CSS для inline-block и word-wrap работает в любом случае.

...