css隐藏文字的5个方法

《css隐藏文字的5个方法》正文开始，本次阅读大概10分钟。

通过CSS隐藏一段文字，甚至隐藏一段HTML都是经常需要用到的，不管是暂时不需要的模块或者当前窗口宽度不足的自适应，都几乎必须用到CSS隐藏！

今天就来分享5个关于如何去通过CSS隐藏文字或者HTML：

1、display: none;

display: none几乎是每一个学会CSS基础的人都喜欢用的隐藏方法，这种方法简单暴力，但其实使用display: none进行隐藏，也会隐藏掉隐藏对象原有的占位空间，消失了无痕迹！

2、visibility: hidden;

和display:none; 相对应，为隐藏的对象保留物理占位空间。

3、overflow: hidden;

overflow: hidden也是可以让对象隐藏的无影无踪，我们最常用overflow: hidden的作用是清除浮动吧，但如果让对象的width和height都为0的话，再加上overflow: hidden就可以让对象直接消失，比如：

.text{
display:block;
overflow:hidden;
width:0;
height:0;
}

其中.text没有宽和高，切记！

4、positon: absolute;

用绝对定位将其推出可视区，不过虽然可视性不存在，但仍占据物理空间，与隐藏文字的宗旨相背，另外我个人不喜欢用绝对坐标定位magin这个属性，margin在不同浏览器中总是带来不可预料的Bug。

.text{
positon:absolute;
margin-top:-9999px;
margin-left:-9999px;
}

5、text-indent: -9999px

text-indent: -9999px的这种方法，我最常见到的用途几乎是在logo上，比如HTML：

ahref=https://www.yzktw.com.cn/老白zblog/a

以上这段代码如果是logo的话，并且显示图片，就只能通过背景图片的方式，把logo图显示出来，但老白zblog这几个文字又必须消失，不能与logo背景图片同时存在吧，所以此时，最好的方法就是使用text-indent: -9999px，把文字甩到屏幕找不到的地方，这种logo方法既能显示图片，又能对SEO很友好！

a{
height:30px;
width:165px;
float:left;
text-indent:-9999px;/*把老白zblog这几个文字甩出去*/
background-image:url(images/logo.gif);/*背景图片*/
background-repeat:no-repeat;/*背景图片不重复*/
display:block;/*把a设置为块级元素*/
position:relative;
}

以上5种方法都可以实现隐藏的目的，但用途和用法又有着很大的区别，必须活血活用，直接套用任何一个都不能成为一个好的前端！