[分享]css两行文字隐藏

在网页设计中，有时候需要隐藏一些文字，这时候就可以使用CSS代码来实现。下面介绍两种常见的两行文字隐藏方法。/ 方法一：使用maxheight / .hide{ maxheight: 0; overf...

在网页设计中，有时候需要隐藏一些文字，这时候就可以使用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，文字会显示出来。