CSS与nowrap的转换并不平滑

我试图允许侧边栏的CSS转换，最好描述如下：

虽然在一行

{white space:nowrap}

中工作得非常出色，但我在确保边栏平滑折叠动画时遇到了困难，因为行似乎已崩溃。在扩展的边栏上给出

nowrap

，只会破坏它

下面是一个用于进一步演示的JSFIDLE：

---

请提供一些指导：）

如果在侧栏中添加保持原始宽度的子元素，并将侧栏设置为

溢出：隐藏

，您应该会得到想要的结果。请参阅：

当您将侧边栏折叠到宽度为50px

时，像“concertetur”这样的词在50px
宽度内没有空间可占。您可以尝试使用来打断单词，并在折叠时占据50px的宽度

检查这个

对这正是我想要的。我以前试过
overflow:hidden
，但没有使用额外的元素。谢谢谢谢你的努力，但我有一个不同的目标。沃哈戴夫提供了：）
.sidebar-collapsed {
    width: 50px;
    -ms-word-break: break-all;
     word-break: break-all;
     // Non standard for webkit
     word-break: break-word;
}