Javascript 锁定时文本换行跳转

正在寻找解决此问题的css或javascript解决方案。我正在使用ScrollMagic将一些文本固定到浏览器窗口，如下所示：

问题在于，当锁定的文本被锁定和取消锁定时，右侧的跨距会跳跃。我正在尝试使固定文字的右侧跨距保持在固定/取消固定固定文字时的位置

以下是描述预期行为的图像：

有没有关于如何将跨度保持在其原始位置的想法

HTML:

---

在锁定和取消锁定dom流时，您正在将锁定的文本移入和移出dom流。如果你不想让其他文本跳转，那么你需要独立于你试图固定的跨度来定位这些文本。谢谢@SeanStopnik yeh，我明白了。但是，如果我使用不同的定位，有没有一种方法可以获得自然的单词包装？

<span id="name-font" style="font-weight: 800; color:red;">PIN THIS TEXT BUT KEEP THE SPACING OF THE TEXT IN THIS RIGHT SPAN --></span>
<span id="right-span"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam finibus nisi nisl, etc. </span>

        var controller = new ScrollMagic.Controller();
        var sceneNameFont = new ScrollMagic.Scene({
            triggerElement: "#name-font",
            triggerHook: 0
        })
        .setPin("#name-font")
        .setVelocity("#name-font", {color: '#0000FF'}, {duration: 500})
        .addTo(controller);