Буквы из Html собираются через js и образуют блоки.Нужен перенос после пробела.Как решить эту задачу?

Question

[Lex666A]

Суть такая.
Есть html блок
<div>текст текст</div>

Все символы из этого блока собираются через js в массив

js

var words = document.getElementsByClassName('one_page_heading-text-word');
var wordArray = [];
var currentWord = 0;

words[currentWord].style.opacity = 1;
for (var i = 0; i < words.length; i++) {
  splitLetters(words[i]);
}

function changeWord() {
  var cw = wordArray[currentWord];
  var nw = currentWord == words.length - 1 ? wordArray[0] : wordArray[currentWord + 1];
  for (var i = 0; i < cw.length; i++) {
    animateLetterOut(cw, i);
  }

  for (var i = 0; i < nw.length; i++) {
    nw[i].className = 'letter behind';
    nw[0].parentElement.style.opacity = 1;
    animateLetterIn(nw, i);
  }

  currentWord = (currentWord == wordArray.length - 1) ? 0 : currentWord + 1;
}

function animateLetterOut(cw, i) {
  setTimeout(function () {
    cw[i].className = 'letter out';
  }, i * 80);
}

function animateLetterIn(nw, i) {
  setTimeout(function () {
    nw[i].className = 'letter in';
  }, 340 + (i * 80));
}

function splitLetters(word) {

  var content = word.innerHTML;
  word.innerHTML = '';
  var letters = [];
  for (var i = 0; i < content.length; i++) {
    var letter = document.createElement('span');
    letter.className = 'letter';
    letter.innerHTML = content.charAt(i);
    word.appendChild(letter);
    letters.push(letter);
  }

  wordArray.push(letters);
}

changeWord();
setInterval(changeWord, 4000);

Конечная цель всего этого сделать так чтобы этот текст, который выводится по букве блоками переносился на новую строчку после каждого пробела, либо после первого пробела, в общем тчобы в тексте всегда было две строки и перенос не ломался а был цельным по словами.
Я туплю уже часа 3.
Сначала я хотел сделать проверку на пустоту или пробел в диве, чтобы после него вставить тег
, потом я пробовал делать это через css, но у меня ничего не вышло.
Какой подход использовать чтобы решить данную задачу? Буду рад любым советам!
Живой пример
https://jsfiddle.net/Lrm46fq0/

UPD.
Вот что мне удалось сделать
https://jsfiddle.net/Lrm46fq0/
Но теперь я хочу понять как мне можно выравнять это буквы по центру контейнера.

Answer 1

[Aricus]

Можно разбить фразу по пробелу через split, а потом уже каждую часть разбивать на буквы, и работать с ними отдельно. Например, задать конечную точку анимации на 1em ниже. Извините, вникать не буду, слишком сложно. Да и переменные названы 1-2 буквами, из-за этого не понятно, что это такое.