在网页设计中,有时候需要隐藏一些文字,这时候就可以使用CSS代码来实现。下面介绍两种常见的两行文字隐藏方法。/* 方法一:使用max-height */ .hide{ max-height: 0; o
在网页设计中,有时候需要隐藏一些文字,这时候就可以使用CSS代码来实现。下面介绍两种常见的两行文字隐藏方法。
/* 方法一:使用max-height */ .hide{ max-height: 0; overflow: hidden; transition: all 0.3s ease-in-out; } .show:hover .hide{ max-height: 1000px; }
这段代码使用max-height属性来实现文字的隐藏和显示。其中,hide类设置了max-height为0,并隐藏溢出内容。当鼠标悬停到show类上时,将hide类的max-height设置成1000px,文字会显示出来。
/* 方法二:使用text-indent */ .hide{ text-indent: -9999px; } .show:hover .hide{ text-indent: 0; }
这段代码使用text-indent属性来实现文字的隐藏和显示。隐藏的文字将会被缩进到屏幕外面,无法看到。当鼠标悬停到show类上时,将hide类的text-indent设置为0,文字会显示出来。
粉丝
0
关注
0
收藏
0