在分裂文​​本中的单词换行

Question

I want to animate text in paragraph in my site by letters. I split my text and wrap each letter in <span> , so I built structure like this with jQuery:

<p>
  <span>H</span>
  <span>E</span>
  <span>L</span>
  <span>L</span>
  <span>O</span>
</p>

For using css transforms I added property inline-block for spans. Now animation works fine but I have problem with word wrapping. Text wrap after each letter not only on space.

I tried to use word-wrap and white-space but it doesn't work :/ What can I do ?

jsFiddle

Answer 1

It works good with float:left; instead of display: inline-block;

See it here

p{
  font-size: 60px;
  overflow: hidden;
}
span{
  float: left;
}

Just saw that on an answer on SO :

inline-blocks are like characters, which means spaces are counted in the width too. Remove spaces/new lines between divs to get what you what. Or switch to other layout method, like float: left.

CSS margins: Why does this layout behave this way?

Answer 2

您可以使用“letter-spacing”css来标记p以增加或减少空间。