<span>この 2 日間、私はタグの間にあるインライン テキストの操作に取り組んできました。
私が探している効果に近いものについては、これをチェックしてください：
JSFiddle の [Result] ボックスで、黄色の [Activate Div] にカーソルを合わせます。Chrome を使用している場合、ピンクのテキストは巻尺が引っ込められているように巻き上がり、緑のテキストは巻尺が引き出されているようにロールアウトします。そういう「現れる」と「消える」というスライドのような効果を狙っています。
これを実現するために、文字間隔の値の間に CSS トランジションを使用しています (「削除」クラスと「挿入」クラスを参照)。ピンクで強調表示されたテキストは、通常の間隔から非常に負の間隔に移行し (可視から不可視になるため)、緑色で強調表示されたテキストは、非常に負の間隔から通常の間隔に移行します (不可視から可視に移行します)。
問題は、このメソッドが実際にブラウザをトリップさせることです。Chrome では問題なく動作します (ただし、非常にぎこちなく、強調表示されていないテキストに問題が生じることがあります)。Safari ではまったく機能していないようです。ピンクとグリーンのセクションがそれぞれ消えて表示されます。
<div>「オーバーフロー」とJQueryのタグを使用して効果を達成しようとしました.animate()（幅の広いdivと幅の狭いdivの間でアニメーション化し、幅の狭いdivからこぼれるオーバーフローテキストを非表示にします）。これは、行を分割するテキストがあるまでは非常にうまく機能します-その場合はまったく機能しないため、この方法は問題外のようです(誰かが私が知らないことを知っていない限り)。
それで、百万ドルの質問: 改行をまたがっても、この種のインラインテキスト操作を行うためのプラグインまたは別の手法を知っている人はいますか?