我有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
答案 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>