使用nowrap的CSS转换并不顺利

Question

我正在尝试允许侧边栏的CSS转换，最好描述为此图片：

虽然单行{white-space: nowrap}工作得非常好，但由于线条似乎已经崩溃，我无法确保顺畅的侧边栏折叠动画。在展开的侧边栏上放置nowrap只会打破它。

这是一个进一步演示的jsfiddle： http://jsfiddle.net/elvista/4K4fh/

一些指导意见将得到赞赏：）

Answer 1

如果您将侧边栏中的子元素添加到原始宽度并将侧边栏设置为overflow: hidden，则应获得所需的结果。请参阅：http://jsfiddle.net/49nf8/

Answer 2

当您将侧边栏折叠为width 50px时，像＆＃34; consectetur＆＃34;在50px width内没有占据空间。您可以尝试使用word-break来破解单词并在折叠时占据50px的宽度。

选中此fiddle

.sidebar-collapsed {
    width: 50px;
    -ms-word-break: break-all;
     word-break: break-all;
     // Non standard for webkit
     word-break: break-word;
}