Не срабатывает свойство CSS при динамической вставке в JS?

Question

[beDenz]

Добрый день. Помогите разобраться. При динамической вставке html кода не срабатывает css свойство text-align: justify, при том, что остальные срабатывают.

Пример здесь: https://jsfiddle.net/enupLv20/

Comments

[Rustam Bainazarov]

В скрипте между span'ами нет мягких пробелов, т. е. они представляют собой одно единое слово, поэтому и не работает свойство.

Answer 1

[fallus]

Ну, у вас в оригинальной разметке есть перенос строки.
Браузер понимает, что эти «слова» разделены между собой.
Либо поставьте перенос строки, либо после каждого <span> поставьте пробел.

<div class="block"><span>1</span> <span>2</span> <span>3</span></div>

*если нет переноса строки или пробела, то это типо как одно слово получается. А text-align: justify не разрывает слова.

Answer 2

[Иван Клименко]

Исправьте ваш JS код:

let temp = document.getElementById('js');
temp.innerHTML = (`
	<div class="block">
		<span>1</span>
		<span>2</span>
		<span>3</span>
	</div>
`);

Comments

[beDenz]

Увы обратные кавычки под запретом.
Так же пробовал через appendChild, результат тот же

[Mesuti]

beDenz, проблема с text-align: justify, потому что остальные стили подхватываются нормально.
Но как решить ситуацию тоже не знаю) буду следить за темой

[Алексей Ярков]

beDenz,

Увы обратные кавычки под запретом.

Кто запретил?

[beDenz]

Mesuti, если бы проблема была именно в text-align: justify то и и верхний блок не работал, потому что стили-классы одни. Мне кажется что из-за того что происходит добавление элементов не приводит к перерасчёту их динамических свойств. Хотя это странно.

[beDenz]

Алексей Ярков, спецификации es5

[Алексей Ярков]

beDenz, серьёзная заявка ))
А что мешает сделать так?

temp.innerHTML = (
  '<div class="block">\n'+
    '<span>1</span>\n'+
    '<span>2</span>\n'+
    '<span>3</span>\n'+
  '</div>'
);