4

我试图显示和隐藏一个包含文本的 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');
});
4

3 回答 3

10

white-space是你的朋友。将其添加到您的p标签样式中

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

它只会阻止里面的文本p换行。

更新代码笔： http ://codepen.io/anon/pen/Kyzpl

于 2013-11-08T11:45:09.080 回答
0

其实很简单！

p {
   height: 1em;
}

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

于 2013-11-08T11:43:51.437 回答
0

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

注意：这允许您的文本长度超过 1 行。

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

CSS

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

p {
  width: 400px;
}
于 2013-11-08T11:56:36.520 回答