教你如何用CSS实现网页文字隐藏
懒人大天才
2024-04-23 23:02
现在的网页设计越来越动态化，如果我们既想实现网页的动态化，又要兼顾友好搜索引擎，就不得不对网页添加一些文字，但这些文字的存在明显与我们动态网页的风格格格不入。怎么办呢？解决的方法是把这些文字进行隐藏。针对这种需求小编为大家网罗了几种css隐藏网页文字的方法，有需要的的朋友不妨参考一下。
1.text-indent:-9999px
这种方法有一个局限性它只适用于块级元素block，如果我们想隐藏掉a上的字体时，问题就来了，将a转化成block的话，往往它身后的的元素就被他赶到下一行了，如果正好这个a后面是一个a按钮，就要用float来浮动以使他身后再出现簇拥者，貌似有点小麻烦喔！
2.display:none
这是一种最为人所熟知也是最常用的方法。它可以使包括容器本身在内的东西都消失，简便且有效。但人无完人，同样这种方法也存在两个耳熟能详的缺陷，就是对搜索引擎不友好，且被屏幕阅读器所忽略。
3.positon:absolute
这种方法的原理是使用绝对定位将文字推出可视区，不过虽然可视性不存在，但仍占据物理空间，所以并不是真正意义上的隐藏文字。
代码如下
.texthidden{
positon:absolute;
margin-top:-9999px;
margin-left:-9999px;
}
4.overflow:hidden
具体代码如下
.texthidden{
display:block;
overflow:hidden;
width:0;
height:0;
}
5.使用line-height:0
代码
.yincang{
line-height:0;
font-size:0;
overflow:hidden;
}
别看代码不多，只有3行。但它们不仅能出色地隐藏掉你background之上的字体，而且在ie6.0、7.0、8.0、firefox 3.010浏览器都能使用。
6.visibility:hidden
设置元素的visibility为hidden也是一种常用方法，和display:none的区别在于，文字在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。
.hidden{
visibility:hidden;
}
visibility:hidden适用于那些隐藏文字后不希望页面布局会发生变化的场景。
以上就是小编给大家网罗的隐藏网页文字的6种方法，虽然它们都很简单，还在不同程度上存在一些缺陷，但所谓不管黑猫白猫，抓到老鼠的就是好猫。只要这些方法能帮助我们达成最终目的，小编觉得就是好方法。当然如果大家还有更好的方法，欢迎给小编留言，大家共同交流喔！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
