css – 当文本包含div收缩时,阻止文本包装到多行上？

我试图显示和隐藏包含文本的div和带有动画的图像,该动画将所有内容缩小为零.我已经得到了相当好的工作,除了我不喜欢文本包装到多行的方式,因为它的包含div在隐藏之前收缩.是否可以阻止文本执行此操作以使

... . . 我试图显示和隐藏包含文本的div和带有动画的图像,该动画将所有内容缩小为零.我已经得到了相当好的工作,除了我不喜欢文本包装到多行的方式,因为它的包含div在隐藏之前收缩.是否可以阻止文本执行此操作以使其保持在一行？

http://codepen.io/anon/pen/FoJzx

<p class="open">Open</p><p class="close">Closed</p><div class="one">    <img src="http://img.wallpaperstock.net:81/maggie-grace-portrait-wallpapers_14105_1600x1200.jpg" />        <p>Here is some text for div 1</p></div>.one {    transition: all 0.5s ease;    width: 400px;  background: grey;}.hide {    width: 1px;}img {    max-width: 100%;    height: auto;}p {  overflow: hidden;}$('.close').click(function(){    $('.one').addClass('hide');});$('.open').click(function(){    $('.one').removeClass('hide');});

.

解决方法

. 白色空间是你的朋友.将其添加到您的p标签样式

p {    overflow: hidden;    white-space: nowrap;}

它只会阻止p内的文本分成新行.

更新的codepen：http://codepen.io/anon/pen/Kyzpl

. . .. ...