步骤CSS更长的话

我发现这个很好的例子：http://codepen.io/tacrossman/pen/GJglH 步骤CSS更长的话

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

的问题是第三跨度，我说“等等等等”到该行的末尾。正如你所看到的，现在文本聚集起来，并没有像其他过渡效果一样。我试过调整值，但其他四个跨度都搞砸了。有任何想法吗？

来源

2014-09-03 user3007294

“不正常”是不正确的问题说明。 – GolezTrol 2014-09-03 19:03:59

确保文本不换使用此额外的CSS：

.type{ 
    white-space: nowrap; 
}

或

.type{ 
    white-space: pre; 
}

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

来源

2014-09-03 19:07:08 GolezTrol

+1这是更好的解决方案，你不希望有加'' 每5个字符:) – 2014-09-03 19:10:06

感谢CodePen，布莱恩！ – GolezTrol 2014-09-03 19:15:51

感谢Brian和GolezTrol！这也是一个很好的解决方案。 – user3007294 2014-09-03 19:22:15

添加单词之间不间断空格修复该问题：

<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

来源

2014-09-03 19:05:03 Holf

Ahh完美，谢谢Holf！（我可以在7分钟内接受）。 – user3007294 2014-09-03 19:06:34

使用

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

来源

2014-09-03 19:07:00 nicogaldo

步骤CSS更长的话

回答

相关问题