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

添加一个设置了宽度和 overflow: hidden;

的内部 div

然后围绕内部 div 设置 div 宽度的动画:

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