javascript在键入下一个span项之前创建新行的键入效果

我的java脚本的这一部分创建了一个样式元素，它在我的网站上起着类似于打字机css效果的作用。由于某些原因，当更改跨度项目时，样式元素会转到新行，然后再在原始行上键入。参见图

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>

  // 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);
};

span {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  padding: 1px 5px 3px 0px;
}