css divはコンテナを破って別のものに落とす

Question

私は内部に数字の列とアニメーションのテキストがある外側のコンテナを持っています。

私の問題は、番号の横にあるアニメーションテキストが番号の下に落ちて、それが外側のコンテナに達してからテキストが壊れてしまうためです。

アニメーションテキストのdivにword-wrap:を試してみました。私はそれがある種の浮動小数点、オーバーフローとワードラップの組み合わせであると確信していますが、私は正しい組み合わせを見つけることができません。

私はアニメーションテキストにtyped.jsを使用しています。ここで

あなたは、JSのスクリプトがいっぱいと文字を削除する方法が、あなたはコードブロックのクラスからdisplay: inline-blockを削除した場合fiddle

Answer 1

作業、行番号以下のコードブロックのジャンプを解決するために表示されています行が追加されたり削除されたりすると不幸な瞬間的なジャンプが起きますが、この特定の問題とは関係ないと思います。

---

編集1

瞬間的なジャンプのための犯人はあなたが書いているテキストが含まれていスパンでwhite-space:preであるように見えます。それをwhite-space: pre-line;に変更すると、ジャンプの問題が解決するように見えます。

私は、最小限の修正プログラムは、2つの事やっていると思う：

1. .CODEブロッククラスからdisplay: inline-block;を削除します。
2. 書かれているコードを含むスパンでwhite-space: pre;からwhite-space: pre-wrapに変更してください。

ここにそれを表示するにはフィドルです：jsfiddle

Answer 2

がその上幅を投げメインコンテナの幅よりも小さい： 代わりにPXのEMを使用して：FYI

.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 
    }); 
}); 

workinグラムのフィドル：

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

私は、仕事にこれを取得するにはワードラップのものを削除する必要がありました - 興味深い問題を！ 今、私は残りの作業を手に入れました！