Javascript cssdiv将容器断开并放到下面的另一个容器中

我有一个外部容器，里面有一列数字和动画文本

我的问题是动画文本应该在数字列旁边，当它到达外部容器，然后文本爆发时，它会落在数字下并备份

我在动画文本div上尝试了wordwrap:但没有效果。我确信这是浮动、溢出和换行的某种组合，但我似乎找不到正确的组合

我使用typed.js作为动画文本

这是一个有效的

如果从代码块类中删除display:inline块，它似乎解决了代码块在行号下的跳转问题，尽管JS脚本填充和删除字母的方式，但在添加或删除行时，您确实会遇到不幸的瞬间跳转，但我认为这与这个问题无关

编辑1

看起来瞬间跳转的罪魁祸首是包含您正在编写的文本的跨度上的空白：pre。当我将其更改为空白：pre-line；，跳跃问题似乎自行解决了

我认为最起码的解决办法是做两件事：

移除显示：内联块；来自.code块类；和 更改空白：pre；到空白：在包含正在编写的代码的范围上预换行。 下面是一个例子：

如果您从代码块类中删除display:inline块，它似乎可以解决代码块在行号下面跳转的问题，尽管JS脚本填充和删除字母的方式，但在添加或删除行时，您确实会遇到不幸的瞬间跳转，但我认为这与这个问题无关

编辑1

看起来瞬间跳转的罪魁祸首是包含您正在编写的文本的跨度上的空白：pre。当我将其更改为空白：pre-line；，跳跃问题似乎自行解决了

我认为最起码的解决办法是做两件事：

移除显示：内联块；来自.code块类；和 更改空白：pre；到空白：在包含正在编写的代码的范围上预换行。

---

这里有一把小提琴来展示它：

在上面扔一个小于主容器宽度的宽度： 使用em代替px：

.code-block {
    display: inline-block;
    padding-top: 3px;
    width: 30em;
}

仅供参考，这并没有改变任何事情，但我加快了你的功能并缩短了单词：

$(function(){
    $(".code-animate").typed({
        strings: ["    <p>Lorem ipsum dolor sit amet, ei sit atomorum forensibus, pro ad denique vituperata. His ni.</p>"],
        typeSpeed: 1,
        backSpeed: 50,
        contentType: 'text',
        loop: true
    });
});

工作小提琴：

我必须去掉包装词才能让它工作-有趣的问题！

---

现在你让我做剩下的

在那里抛出一个小于主容器宽度的宽度： 使用em代替px：

.code-block {
    display: inline-block;
    padding-top: 3px;
    width: 30em;
}

仅供参考，这并没有改变任何事情，但我加快了你的功能并缩短了单词：

$(function(){
    $(".code-animate").typed({
        strings: ["    <p>Lorem ipsum dolor sit amet, ei sit atomorum forensibus, pro ad denique vituperata. His ni.</p>"],
        typeSpeed: 1,
        backSpeed: 50,
        contentType: 'text',
        loop: true
    });
});

工作小提琴：

我必须去掉包装词才能让它工作-有趣的问题！

---

现在你让我做剩下的

我的目标是停止瞬间跳转，我已尝试设置宽度：也在代码块上。更新了答案，并对核心跳转问题进行了最小修复。是的，谢谢你，我已经考虑过了，所以我删除了它，但没有效果。没有想到将其更改为空白：pre-wrapmy的目标是停止瞬间跳转，我已尝试在代码块上设置宽度：也设置了宽度。更新了答案，并对核心跳转问题进行了最低限度的修复。是的，谢谢，我已经考虑过了，所以我删除了它，但没有效果。没有想到要将其更改为空白：预包装