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