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

时间:2016-04-11 07:03:05

标签: javascript html css

我想用字母为我网站上的段落中的文字添加动画效果。 我将我的文本拆分并将每个字母包装在<span>中,所以我使用jQuery构建了这样的结构:

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

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

我尝试使用word-wrapwhite-space,但它不起作用:/ 我该怎么办?

jsFiddle

2 个答案:

答案 0 :(得分:0)

它适用于float:left;而不是display: inline-block;

See it here

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

刚刚在SO上找到答案:

  

内联块就像字符一样,这​​意味着要计算空格   宽度也是。删除div之间的空格/换行以获得你的内容   什么。或者切换到其他布局方法,例如float:left。

CSS margins: Why does this layout behave this way?

答案 1 :(得分:0)

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