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

Question

在过去的两天内，我一直在处理位于<span>标记之间的内联文本。

对于接近我想要的效果的东西，请查看以下内容：

http://jsfiddle.net/6uf96/5/

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

为此，我在字母间距值之间使用CSS过渡（请参阅“删除”和“插入”类）。 粉色突出显示的文本从正常间距过渡到高度负间距（从可见到不可见），绿色突出显示的文本在高度负间距过渡到正常间距（从不可见到可见）。

问题在于该方法确实使浏览器跳闸。 它可以在Chrome上正常运行（尽管这非常令人不安，有时高亮显示的文字有时会出现问题）。 它似乎根本无法在Safaari上使用-粉色和绿色部分只是消失并分别出现。

我试图通过<div>标签和“溢出”和JQuery的.animate()实现效果（在高宽和低宽div之间进行动画处理，并隐藏溢出到低宽div之外的溢出文本）。 直到您遇到断行的文本，此方法才能很好地工作-那时它根本不起作用，因此该方法似乎是不可能的（除非有人知道我不知道的内容）。

那么，百万美元的问题：有人知道一个插件或另一种技术来进行这种内联文本操作，甚至跨越换行符吗？

Answer 1

要使其在Safari中运行，您需要使用转换的前缀版本。 这意味着您需要将-webkit-transition添加到常规transition 。

我相应地更新了您的jsFiddle： http : //jsfiddle.net/6uf96/7/