javascript - 拆分文本中的自动换行

Question

我想通过字母对我网站的段落中的文本进行动画处理。我分割文本并将每个字母包装在 <span> 中，所以我用 jQuery 构建了这样的结构:

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

为了使用 css 转换，我添加了属性 inline-block对于跨度。现在动画工作正常，但我在自动换行方面遇到问题。每个字母后的文本换行不仅限于空格。

我尝试使用word-wrap和white-space但它不起作用:/我能做什么？

<强> jsFiddle

Answer 1

它与 float:left; 配合使用效果很好，而不是 display: inline-block;

See it here

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

刚刚在 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?