Question

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

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

我在动画文字div上尝试<%= javascript_include_tag 'section_1', 'data-turbolinks-track' => true %>无效。我确信它是浮动，溢出和自动换行的某种组合，但我似乎找不到合适的组合。

我使用typed.js作为动画文字。

这是一个有效的fiddle

Answer 1

如果从代码块类中删除display: inline-block，它似乎可以解决跳转到行号以下的代码块，虽然JS脚本填充和删除字母的方式，但你会得到一个不幸的瞬间跳跃当添加或删除一行时，我认为这与此特定问题无关。

修改1

看起来瞬间跳跃的罪魁祸首是包含您正在撰写的文字的跨度上的white-space:pre。当我将其更改为white-space: pre-line;时，跳跃问题似乎已自行解决。

我认为最小的修复是做两件事：

从.code-block类中删除display: inline-block;;和
在包含正在编写的代码的范围内将white-space: pre;更改为white-space: pre-wrap。

以下是展示它的小提琴：jsfiddle

Answer 2

在那里抛出一个小于主容器宽度的宽度：使用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
    });
});

工作小提琴：

https://jsfiddle.net/gjab03dx/8/

我不得不删除自动换行的内容以使其工作， - 有趣的问题！现在你让我继续工作!!

css div打破容器并下降到另一个容器

2 个答案: