CODEWITHSUNDEEP
htmlcssanimation
user3007294
user3007294

Reputation: 951

Steps in CSS for longer words

I found this great example: 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>

The problem is for the third span, I added 'and blah blah' to the end of the line. As you can see, the text now bunches up and doesn't follow the same transition effect as the others. I've tried adjusting the values but then the other four spans are screwed up. Any ideas?

Upvotes: 0

Views: 54

Answers (3)

GolezTrol
GolezTrol

Reputation: 116160

Make sure the text doesn't wrap using this additional CSS:

.type{
  white-space: nowrap;
}

or

.type{
  white-space: pre;
}

Updated CodePen - Better than editing the text (in my opinion):

Upvotes: 5

nicogaldo
nicogaldo

Reputation: 585

use 

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

Upvotes: 0

Holf
Holf

Reputation: 6441

Adding non-breaking spaces between the words fixes the issue:

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

New version here: http://codepen.io/anon/pen/Jtlnk

Upvotes: 4

Related Questions