2014-09-03 50 views
0

我發現這個很好的例子: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> 

的問題是第三跨度,我說「等等等等」到該行的末尾。正如你所看到的,現在文本聚集起來,並沒有像其他過渡效果一樣。我試過調整值,但其他四個跨度都搞砸了。有任何想法嗎?

+0

「不正常」是不正確的問題說明。 – GolezTrol 2014-09-03 19:03:59

回答

5

確保文本不換使用此額外的CSS:

.type{ 
    white-space: nowrap; 
} 

.type{ 
    white-space: pre; 
} 

Updated CodePen - 不是編輯文本(在我看來)更好:

+2

+1這是更好的解決方案,你不希望有加'' 每5個字符:) – 2014-09-03 19:10:06

+1

感謝CodePen,布萊恩! – GolezTrol 2014-09-03 19:15:51

+1

感謝Brian和GolezTrol!這也是一個很好的解決方案。 – user3007294 2014-09-03 19:22:15

4

添加單詞之間不間斷空格修復該問題:

<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

+0

Ahh完美,謝謝Holf! (我可以在7分鐘內接受)。 – user3007294 2014-09-03 19:06:34

0

使用

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