Question

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

<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');
});

Answer 1

white-space是你的朋友。将其添加到您的p代码样式

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

它只会阻止p内的文字进入新行。

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

Answer 2

其实很简单！

p {
   height: 1em;
}

注意，溢出已设置为隐藏。

Answer 3

您可以设置p元素的宽度，并在包装器上指定overflow-x为hidden。

注意：这允许您的文字长于1行。

http://codepen.io/thgaskell/pen/gDcpy

CSS

.one {
  /* ... */
  overflow-x: hidden;
}

p {
  width: 400px;
}

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

3 个答案:

CSS