CSS实例:常用CSS隐藏文字方法揭秘
创始人
2024-07-13 19:10:59
0

 你对使用CSS隐藏文字的方法是否熟悉,这里向大家简单介绍一下,比如display:none方法,它可以使包括容器本身在内的东西都消失,简便且有效,但是缺陷也不容忽视,那就是对搜索引擎不友好,且被屏幕阅读器所忽略。

CSS实例:常用的CSS隐藏文字的方法

今天我们来学习一下其它的一些常用的方法,并作出一些点评分析:

1、display:none:

它可以使包括容器本身在内的东西都消失,简便且有效,但它有两个耳熟能详的缺陷,那就是对搜索引擎不友好,且被屏幕阅读器所忽略。

2、text-indent:-9999px:

text-indent是首行缩进,所以对于多行文本,若单独使用它就有明显的不足,需加上white-space:nowrap;来弥补不足,但还有一个问题:物理空间仍然存在,故还需设置line-height:0;或使用超小字体(在IE下有点BUG),最终代码如下:

CSS实例代码:

  1. .texthidden{  
  2. text-indent:-9999px;  
  3. white-space:nowrap;  
  4. line-height:0;  
  5. }  
  6.  

3、overflow:hidden:

是一个比较合理且我最喜欢的方法,具体代码如下:

CSS实例代码:

  1. .texthidden{  
  2. display:block;/*统一转化为块级元素*/  
  3. overflow:hidden;  
  4. width:0;  
  5. height:0;  
  6. }  
  7.  

4、positon:absolute:

用绝对定位将其推出可视区,不过虽然可视性不存在,但仍占据物理空间,与隐藏文字的宗旨相背

CSS实例代码:

  1. .texthidden{  
  2. positon:absolute;  
  3. margin-top:-9999px;  
  4. margin-left:-9999px;  
  5. }  
  6.  

【编辑推荐】

  1. Div CSS实例教程:页面制作方法全程指导
  2. 技术分享 如何实现CSS横向导航
  3. DIV CSS实例:用CSS实现背景半透明效果
  4. 解析DIV CSS实例:让页脚保持在未满屏页面底部
  5. 鼠标经过时改变DIV背景颜色的三种途径

 

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
规避非法攻击 用好路由器远程管... 单位在市区不同位置设立了科技服务点,每一个服务点的员工都通过宽带路由器进行共享上网,和单位网络保持联...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
着眼MAC地址,解救无法享受D... 在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...