Jquery 当宽度减小时，禁用div中的文本拟合_Jquery_Html_Css

Jquery 当宽度减小时，禁用div中的文本拟合

jquery html css

Jquery 当宽度减小时，禁用div中的文本拟合,jquery,html,css,Jquery,Html,Css,当我尝试减小div的宽度（使用jquery.animate（）函数）时，该div中的文本正在尝试匹配，而单词将被分解。我怎样才能避免呢 $("#btn").on("click", function(){ $("#myDiv").animate({"width":"0px"}, 400); }); 我创建了一个示例来说明我想要避免的内容尝试添加此css： #myDiv{ overflow: hidden; } #myDiv p{ width: 200px; } 您需要为指

当我尝试减小div的宽度（使用jquery.animate（）函数）时，该div中的文本正在尝试匹配，而单词将被分解。我怎样才能避免呢

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

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

尝试添加此css：

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

您需要为

指定一个特定的宽度，否则它将根据父div的大小调整大小。

创建另一个由#myDiv包装的div，为该div指定一个固定的宽度，并在#myDiv上设置

溢出：隐藏
您可能不需要将溢出设置为隐藏，这取决于您希望最后一件事情的外观。
试试这个
<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>

我已经更新了JSFIDLE
使用#myDiv p{width:100%}怎么样？我能做到吗？你可以在运行时用jQuery:$（“#myDiv p”）.css（{width:$（“#myDiv”）.width（））设置宽度然后你可以删除css中的宽度行
$("#btn").on("click", function(){
    $("#myDiv").animate({"width":"0px"}, 400);
});