Шаги в 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

Убедитесь, что текст не завернуть с помощью этого дополнительный CSS:

.type{ 
    white-space: nowrap; 
}

или

.type{ 
    white-space: pre; 
}

Updated CodePen - Лучше, чем редактирование текста (на мой взгляд):

источник

2014-09-03 19:07:08 GolezTrol

+1 Это лучшее решение, вы не хотите добавлять ' ' каждые 5 символов :) –

Спасибо за CodePen, Брайан! – GolezTrol

Спасибо Брайан и ГолецТрол! Это отличное решение. – user3007294

Добавление неразрывных пробелов между словами исправляет проблему:

<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

использование

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

источник

2014-09-03 19:07:00 nicogaldo

Шаги в CSS для более длинных слов

ответ

Смежные вопросы