Question

当我尝试减小div的宽度时（使用jquery .animate（）函数），该div内部的文本试图适应并且单词分解。我怎么能避免这种情况？

$("#btn").on("click", function(){
    $("#myDiv").animate({"width":"0px"}, 400);
});

我创建了一个jsfiddle来说明我想要避免的内容。

Answer 1

尝试添加此css：

#myDiv{
  overflow: hidden;
}
#myDiv p{
    width: 200px;
}

Answer 2

创建另一个由#myDiv包装的div，给这个div一个固定的宽度，并在#mydiv上设置overflow:hidden。

您可能不需要设置隐藏的溢出，具体取决于您希望最终的外观。

Answer 3

您需要为<p>指定一个特定宽度，否则会调整为父div的大小。

Answer 4

试试这个

<body>
<div id="myDiv" style="width:200px;height:200px;overflow:hidden;position:relative;">
    <p style="position:absolute;width:200px;height:200px;overflow:hidden;margin:0;padding:0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
<button id="btn">Click this</button>
</body>

脚本

$("#btn").on("click", function(){
    $("#myDiv").animate({"width":"0px"}, 400);
});

我更新了jsfiddle http://jsfiddle.net/Ka8MJ/12/

当宽度减小时，禁用文本适合div

4 个答案: