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>

问题在于第三个跨度,我在行尾添加了"等等等等".正如您所看到的,文本现在聚集在一起并且不会像其他文本那样遵循相同的过渡效果.我已经尝试调整值,但其他四个跨度被搞砸了.有任何想法吗？

Answer 1

确保文本不使用此附加CSS换行:

.type{
  white-space: nowrap;
}

要么

.type{
  white-space: pre;
}

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