网页中用CSS样式表隐藏文字的挺新颖方法

最新推荐文章于 2025-08-15 10:51:23 发布

原创最新推荐文章于 2025-08-15 10:51:23 发布 · 774 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #搜索引擎

本文探讨了三种常见的CSS隐藏文字的方法：使用display:none;、visibility:hidden;和overflow:hidden;，并指出了各自的不足之处。同时提出了一种新颖的方法，通过将元素的宽度和高度设置为0并隐藏溢出内容来有效避免搜索引擎和屏幕阅读器的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导读：
　　说明为什么现有的几种CSS隐藏文字的方法的缺陷和新的方法如何弥补。实用性一般，但是这个方法挺新颖的。
　　 1.display:none;的缺陷
　　搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略
　　屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。
　　 2. visibility: hidden ;的缺陷
　　这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间
　　 3.overflow:hidden;一个比较合理的方法
　　.texthidden { display:block;/*统一转化为块级元素*/ overflow: hidden; width: 0; height: 0; }
　　就像上面的一段CSS所展示的方法，将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的。

本文转自
http://tech.163.com/07/0823/10/3MISKQFP0009158P.html