Javascript CSS宽度从0到x的转换会导致内容挤压

JsFiddle：

将鼠标悬停在灰色框上方。看看当左面板滑出时，内容是如何垂直挤压的？当转换结束时，内容变得“格式良好”。如何在内容滑出时使其“格式良好”？谢谢

堆栈需要一些代码，所以这里是左面板部分。我尝试了

空白：nowrap

，但它将内容强制放在一行上，这不是我想要的

.left-panel {
width: 0px;
transition: width 1s;
float:left;
overflow: hidden;
height: 250px;
}
.left-panel-slide {
    width:200px;
}

---

只需给

p

和

h1

加上宽度，即可达到您想要的效果

$（'.middle panel'）。打开（'mouseover'，函数（）{
$（'.left panel'）.addClass（'left-panel-slide'）；
$（'.container'）.addClass（'container-slide'）；
});
$（'.middle panel'）。on（'mouseout'，function（）{
$（'.left panel'）.removeClass（'left-panel-slide'）；
$（'.container'）.removeClass（'container-slide'）；
});
.container{
位置：绝对位置；
边框：3倍蓝色实心；
宽度：200px；
高度：250px；
左：300px；
最高：30%；
过渡：宽度1s，左侧1s；
}
.集装箱滑梯{
宽度：400px；
左：100px；
}
.中间板{
背景：灰色；
宽度：200px；
高度：250px；
浮动：左；
}
.左面板{
宽度：0px；
过渡：宽度1s；
浮动：左；
溢出：隐藏；
高度：250px；
}
.左面板p.左面板h1{
宽度：200px；
}
.左面板滑轨{
宽度：200px；
}

你好，世界！
同一天，你可以坐在一张桌子上，一个真实的世界，一个不需要任何东西的世界。这是一个很好的例子

只需为
p
和
h1
增加宽度，即可达到您想要的效果


$（'.middle panel'）。打开（'mouseover'，函数（）{
$（'.left panel'）.addClass（'left-panel-slide'）；
$（'.container'）.addClass（'container-slide'）；
});
$（'.middle panel'）。on（'mouseout'，function（）{
$（'.left panel'）.removeClass（'left-panel-slide'）；
$（'.container'）.removeClass（'container-slide'）；
});
.container{
位置：绝对位置；
边框：3倍蓝色实心；
宽度：200px；
高度：250px；
左：300px；
最高：30%；
过渡：宽度1s，左侧1s；
}
.集装箱滑梯{
宽度：400px；
左：100px；
}
.中间板{
背景：灰色；
宽度：200px；
高度：250px；
浮动：左；
}
.左面板{
宽度：0px；
过渡：宽度1s；
浮动：左；
溢出：隐藏；
高度：250px；
}
.左面板p.左面板h1{
宽度：200px；
}
.左面板滑轨{
宽度：200px；
}

你好，世界！
同一天，你可以坐在一张桌子上，一个真实的世界，一个不需要任何东西的世界。这是一个很好的例子

只需将滑动到div中的内容以固定宽度包装即可

<div class="container">
<div class="left-panel">
    <div class="content-wrapper">
        <h1> Hello World! </h1>
        <p>Lorem ipsum dolor sit amet, ea vero veritus eam, ad aperiri inermis consequuntur est. Id mundi accumsan eum, ius modo dicunt quaerendum ex.</p>
    </div>
   </div>
   <div class="middle-panel"></div>
</div>

.content-wrapper {
 width: 200px;
 }


你好，世界！
同一天，你可以坐在一张桌子上，一个真实的世界，一个不需要任何东西的世界。这是一个很好的例子

.内容包装器{
宽度：200px；
}

只需将滑动到div中的内容以固定宽度包装即可

<div class="container">
<div class="left-panel">
    <div class="content-wrapper">
        <h1> Hello World! </h1>
        <p>Lorem ipsum dolor sit amet, ea vero veritus eam, ad aperiri inermis consequuntur est. Id mundi accumsan eum, ius modo dicunt quaerendum ex.</p>
    </div>
   </div>
   <div class="middle-panel"></div>
</div>

.content-wrapper {
 width: 200px;
 }


你好，世界！
同一天，你可以坐在一张桌子上，一个真实的世界，一个不需要任何东西的世界。这是一个很好的例子

.内容包装器{
宽度：200px；
}

您必须固定儿童的宽度，如下所示（参考JS fiddle HTML）：

您必须固定孩子的宽度，如下所示（参考JS fiddle HTML）：

这一切都是非常可行的，不需要JavaScript或对内部元素进行额外的样式设置


.container{
位置：绝对位置；
边框：3倍蓝色实心；
宽度：200px；
高度：250px；
左：300px；
最高：30%；
过渡：宽度1s，左侧1s；
}
.中间板{
背景：灰色；
宽度：200px；
高度：250px；
浮动：左；
}
.左面板{
宽度：180px；
填充：10px；
过渡：所有1；
溢出：隐藏；
高度：250px；
位置：绝对位置；
左：0；
z指数：-1；
}
.容器：悬停。左面板{
左：-200px；
}

你好，世界！
同一天，你可以坐在一张桌子上，一个真实的世界，一个不需要任何东西的世界。这是一个很好的例子

这一切都是非常可行的，没有JavaScript或内部元素的额外样式


.container{
位置：绝对位置；
边框：3倍蓝色实心；
宽度：200px；
高度：250px；
左：300px；
最高：30%；
过渡：宽度1s，左侧1s；
}
.中间板{
背景：灰色；
宽度：200px；
高度：250px；
浮动：左；
}
.左面板{
宽度：180px；
填充：10px；
过渡：所有1；
溢出：隐藏；
高度：250px；
位置：绝对位置；
左：0；
z指数：-1；
}
.容器：悬停。左面板{
左：-200px；
}

你好，世界！
同一天，你可以坐在一张桌子上，一个真实的世界，一个不需要任何东西的世界。这是一个很好的例子

这是一个非常简单的答案。正是我需要的，谢谢！我很高兴能帮助@EricGuanWell，这是一个非常简单的答案。正是我需要的，谢谢！如果允许的话，我会接受答案。很高兴我能帮助@EricGuan查看我关于更简单的无JavaScript解决方案的答案。查看我关于更简单的无JavaScript解决方案的答案。