不使用display:none从跨度中删除高度?

时间:2014-05-07 21:06:36

标签: css height html

我有span,其中包含几行文字。 span包含在div max-height: 0中。文本行不在p标记中,因为我需要避免创建任何空格。正如您所期望的那样,span的高度越高,您放入的文字越多。但是,由于外div的{​​{1}}为0,我不希望任何该文字可见。我将height更改为0,但当然它在页面上占用的空间仍然存在。我需要删除它分配的空白以适应文本。将opacity的CSS更改为span并没有消除网页上可见的空白,即使它正确地将height: 0;设置为0 height 1}},我不确定为什么会这样。我发现删除空格的唯一方法是设置span,但在我的情况下我不能这样做(因为CSS动画在没有显示的情况下不起作用)。

另请注意,外部display: none;包含在div中,并未应用任何特殊样式 - 静态定位且未调整高度。

我认为基本问题是:当父母的div为0时,如何隐藏孩子span

以下是相关代码:

height

2 个答案:

答案 0 :(得分:1)

尝试添加:

overflow:hidden

在你的css文件中

答案 1 :(得分:0)

试试这个:

<div style="max-height:0;">
<span style="opacity:1;height:0;display:block;overflow:hidden;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.
</span>