Javascript 使用JQuery或CSS3转换（或两者）处理内联文本

在过去的两天里，我一直在处理

标记之间的内联文本

要获得与我想要的效果相近的效果，请查看以下内容：

在JSFIDLE的“结果”框中，将鼠标悬停在黄色的“激活Div”上。如果您使用的是Chrome，则粉色文本会向上卷起，就像是一个缩回，而绿色文本会向外卷起，就像是一个卷尺被拉出一样。这种滑动“出现”和“消失”是我想要的效果

为了实现这一点，我使用了字母间距值之间的CSS转换（请参见“删除”和“插入”类）。粉红色高亮显示的文本从正常间距过渡到高度负间距（从可见到不可见），绿色高亮显示的文本从高度负间距过渡到正常间距（从不可见到可见）

问题是，这种方法确实会让浏览器崩溃。它可以在Chrome上正常工作（尽管它非常不稳定，有时会出现不亮文本的问题）。它似乎对Safaari根本不起作用——粉色和绿色部分只是消失，然后分别出现

我已经尝试使用带有“overflow”的

标记和JQuery的

.animate（）

（在高宽和低宽div之间设置动画，并隐藏从低宽div溢出的溢出文本）来实现此效果。这种方法非常有效，直到你有了一个突破界限的文本——它根本不起作用，所以这种方法似乎是不可能的（除非有人知道我不知道的东西）

---

因此，百万美元的问题是：有没有人知道插件或其他技术可以进行这种内联文本操作，即使是跨换行操作？

要在Safari中工作，您需要使用带前缀的Transions版本。这意味着您需要将

-webkit转换

添加到常规的

转换

我相应地更新了您的JSFIDLE：