CSS：调整元素大小而不移动内容

Question

我试图编写一段具有特定宽度和高度的div的代码。该div还有一个CSS动画，将div缩小为零。但是，文本包装。我不希望里面的文字换行。我将为演示创造一个小提琴：

Link

我尝试了overflow: hidden，但文字最终仍然包装。

如果我错过了一些明显的事情，我会事先道歉，并提前感谢。

任何Javascript解决方案（除非它添加类或其他内容）不是首选，因为CSS动画要快得多。

Answer 1

使用white-space CSS属性并将值设置为nowrap：

white-space: nowrap;

Answer 2

将white-space: nowrap;添加到#bar

Answer 3

我刚在主div中添加了另一个div并将文本放在其中，它似乎正在做你想要它做的事情。

<div id="bar">
    <div style="width:250px; height:250px;">Good Day.
        <br/>
        <br/>I'm a DIV
        <br/>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br/>And I shouldn't move when animating.</div>
</div>

试一试。文字将始终适应其“＆＃39;容器，像这样做将它放在另一个容器中，它仍然是你想要它的大小，并且因为你在外部容器上将溢出设置为none，当收缩小于内部div时，不会弹出滚动条。