我想用字母为我网站上的段落中的文字添加动画效果。
我将我的文本拆分并将每个字母包装在<span>
中,所以我使用jQuery构建了这样的结构:
<p>
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
</p>
对于使用css转换,我为spans添加了属性inline-block
。
现在动画工作正常,但我有自动换行的问题。
每个字母后面的文本换行不仅在空格上。
我尝试使用word-wrap
和white-space
,但它不起作用:/
我该怎么办?
答案 0 :(得分:0)
它适用于float:left;
而不是display: inline-block;
p{
font-size: 60px;
overflow: hidden;
}
span{
float: left;
}
刚刚在SO上找到答案:
内联块就像字符一样,这意味着要计算空格 宽度也是。删除div之间的空格/换行以获得你的内容 什么。或者切换到其他布局方法,例如float:left。
答案 1 :(得分:0)
您可以使用“letter-spacing”css来标记p以增加或减少空间。