用CSS隐藏文字方法的比较

通过CSS来隐藏文字是网站设计做常用的方法, 有多种方法可以达到隐藏文字的目的. 这些方法各有优点和缺点, 下面就来看看这些用CSS隐藏文字的

一. CSS语句:display:none

这种方法就是使定义的区块内容都不可见, 来达到隐藏文字的目的，这种方法虽然简便且有效，但它有个致使的缺点就是对搜索引擎不友好，容易被认为是在作弊, 还有好多程序都会认为区块内容没有而略过而读不到内容, 这很不利于SEO的. 关于SEO具体可以看: SEO学习必须通过这个途径

二. CSS语句:text-indent:-9999px

此方法是通过text-indent是进行首行无限的负缩进，来达到隐藏文本的目的, 这种方法常见于图片LOGO的处理, 既能显示图片,又能有文字描述, 对SEO很有好处. 但对多行文本就有其不足之处，因为它的物理存在性, 会显示出滚动条.需加上white- space:nowrap;来弥补不足，还需设置line-height:0;或使用超小字体(在IE还是有问题)，最终代码如下:

.texthidden{
text-indent:-9999px;
white-space:nowrap;
line-height:0;
}

三. CSS语句:overflow:hidden

这也是一种比较好的方法,通过流出显示区, 而使文字隐藏, 代码如下:

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

四. CSS语句:positon:absolute

用绝对定位把区块定位于非可视区，这种方法如果在定位过于复杂的页面容易产生意想不到的错误.

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

用CSS隐藏文字方法的比较来看, 推荐二和三的方法, 如果是单行, 要点位显示的, 如LOGO的说明文字, 用text-indent:-9999px 比较好, 而对于内容比较多的使用overflow:hidden比较好.

对于其它的文字的修饰, 可以看下: 文字中间加横线和对文字打叉

本页链接: http://www.dengor.com/archives/350.html (转载请注明出处)

One thought on “用CSS隐藏文字方法的比较”