html - CSS 中较长单词的步骤

Question

我找到了这个很好的例子:http://codepen.io/tacrossman/pen/GJglH

<div class="animation">
  <span class="type">beaches<span>_</span></span>
    <span class="type">color<span>_</span></span>
    <span class="type">happiness and blah blah<span>_</span></span>
    <span class="type">wonder<span>_</span></span>
    <span class="type">sugar<span>_</span></span>
    <span class="type">sunshine<span>_</span></span>
</div>

问题是第三个跨度，我在行尾添加了“and blah blah”。正如您所看到的，文本现在聚在一起并且不遵循与其他文本相同的过渡效果。我试过调整值，但其他四个跨度都搞砸了。有什么想法吗？

Answer 1

使用这个额外的 CSS 确保文本不换行:

.type{
  white-space: nowrap;
}

或

.type{
  white-space: pre;
}

Updated CodePen - 比编辑文本更好(在我看来):