寬度和高度減小時如何在div內停止文本更改（靈活填充）

Question

我在另一個div中有一個div。 子div包含一些文本。 當我應用動畫時。 減小寬度和高度根據大小重置文本里面。 我知道為什么會發生這種情況，但我想停止更改文本的外觀。

 function animation() { $(".outer").animate({ "width": "200px", "height": "300px" }); } animation(); 

 div { width: 300px; height: 300px; } div > div { padding: 30px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="outer"> <div> Hello world Hello world hello world </div> </div> 

Answer 1

在您的CSS中，嘗試添加min-width: 300px; 轉到div > div選擇器。 由於要減少動畫的容器，因此可能要添加overflow: scroll; 在.outer DIV上。