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

Updated CodePen - 比编辑文本更好（在我看来）：

Answer 2

在单词之间添加不间断的空格可以解决问题：

<div class="animation">
  <span class="type">beaches<span>_</span></span>
    <span class="type">color<span>_</span></span>
    <span class="type">happiness&nbsp;and&nbsp;blah&nbsp;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>

此处的新版本：http://codepen.io/anon/pen/Jtlnk

Answer 3

使用

<span class="type">happiness&nbsp;and&nbsp;blah&nbsp;blah<span>_</span></span>

CSS中的步骤用于更长的单词

3 个答案: