Эффект печати для создания новой строки в JavaScript перед вводом следующего элемента span

Эта часть моего java-скрипта создала элемент стиля, который действует как эффект css-записи типа на моем веб-сайте. По какой-то причине, когда он изменяет элемент span, элемент стиля переходит к новой строке, прежде чем вводить текст снова в исходной строке. См. Изображение.

HTML

<h1>Hi, Im Roshni. My skills include
<span
 class="txt-rotate"
 data-period="2000"
 data-rotate='["T-SQL.", "HTML5.", "CSS.", "C#.", "SSRS & SQL-RD.", "Sharepoint Designer.", "Java.", "MySQL."]'></span>
</h1>

JavaScript:

  // INJECT CSS
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML += ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
  document.body.appendChild(css);
};