如何在宽度和高度降低时停止文本内部更改（灵活填充）

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; DIV上添加.outer。