CSS转换导致div在转换期间调整大小

Question

我有一个滑动到一定宽度的侧边菜单。滑块包含带文本的div。 当侧面菜单滑出或返回时（转换期间） - 文本会尝试调整大小以适应最小化空间，从而导致所有单词短暂地位于垂直列中。

是否可以修复文本和div并且转换显示越来越多的数据在其最终格式化（即在转换结束时将如何显示）与试图容纳不断增加的数据相比/减少空间？

以下是转换代码：

.slider {
float: left;
height: 100%;
width: 0;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}