使用 nowrap 的 CSS 过渡不平滑答案

【问题标题】：CSS transition with nowrap is not smooth使用 nowrap 的 CSS 过渡不平滑
【发布时间】：2014-05-25 02:41:00
【问题描述】：

我正在尝试允许侧边栏的 CSS 过渡，最好用这张图片来描述：

虽然{white-space: nowrap} 在单行中运行得很好，但我无法确保平滑的侧边栏折叠动画，因为线条似乎已分解。在展开的侧边栏上提供nowrap 只会破坏它。

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

我们将不胜感激：)

【问题讨论】：

标签： css animation css-transitions transition

【解决方案1】：

如果您在侧边栏添加一个保持原始宽度的子元素并将侧边栏设置为overflow: hidden，您应该会得到您想要的结果。见：http://jsfiddle.net/49nf8/

【讨论】：

是的！这正是我想要的。我之前尝试过overflow:hidden，但没有使用额外的元素。谢谢！

【解决方案2】：

当您将侧边栏折叠到width 50px 时，“consectetur”之类的字词在 50 像素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;
}

【讨论】：

感谢您的尝试，但我有不同的目标。 woahdave 提供了它:)