ddc
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
网站建设 域名注册 网站建设 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计 虚拟主机 域名注册 acg王国 ACG玩家 品牌设计 上海网站建设
求创科技
网站建设
中国互联
素材出售
中国设计秀
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> 常用的CSS隐藏文字的方法

常用的CSS隐藏文字的方法

来源:中国设计秀    作者:straw    点击:260     加入收藏

在以前的文章中,我们也介绍多种类似CSS隐藏文字的处理手法:

CSS对文字溢出时的自动隐藏处理
http://www.cnwebshow.com/edu/html/article_707.html

CSS中以图片替换文字的表现方法
http://www.cnwebshow.com/edu/html/article_707.html

CSS布局实例:隐藏input 文字
http://www.cnwebshow.com/edu/html/article_4381.html

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

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

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

div css xhtml xml Example Source Code Example Source Code
.texthidden{ 
 text-indent:-9999px; 
 white-space:nowrap; 
 line-height:0; 
}

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

div css xhtml xml Example Source Code Example Source Code
.texthidden{ 
 display:block;/*统一转化为块级元素*/ 
 overflow:hidden; 
 width:0; 
 height:0; 
}

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

div css xhtml xml Example Source Code Example Source Code [
.texthidden{ 
 positon:absolute; 
 margin-top:-9999px; 
 margin-left:-9999px; 
}
0
顶一下
2008-01-25 13:02:27    出处:中国设计秀cnwebshow.com
Google
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口