javascript - div の展開時にテキストが再フォーマットされないようにする

Question

jquery を使用して HTML を div に配置しています。その後、幅が大きくなるにつれて右側の要素が移動するように div を拡張したいと思います。幅が大きくなるにつれて、私が拡大しているdivのテキスト/HTMLが常に再フォーマットされないようにする方法はありますか。常にごちゃごちゃしているのではなく、明らかにされているように見えるようにするためですか？

$(document).ready(function(){
  $('body').on('click', '#btn', function(){
    var contents = $('#contentDiv').html(); 
        $('#div2').append(contents).animate({'width':'100px'}, 1000);
  });  
});

http://jsbin.com/oqosiz/1/edit

Answer 1

幅が設定された内部divを追加し、overflow: hidden;

次に、内側のdivの周りのdivの幅をアニメートします。

http://jsbin.com/oqosiz/2/edit