css text-indent隐藏文字的技巧

发布时间:2020-04-09编辑:脚本学堂
本文介绍一个css技巧,使用text-indent隐藏文字,通常text-indent用来文字缩进,本文教大家一个特别的用法,感兴趣的朋友参考下吧。

本节内容:
text-indent隐藏文字

以图换字是CSS布局中非常常用的一种手段,因为图片文字有时候比可选的文字的表达效果更好!

因此,某些文字标题是用图片来表达的。
但写一个img标签实在不雅,为了照顾蜘蛛抓取,这里使用浏览器障眼法。

使用常用的text-indent属性来实现。

1,css代码:
 

复制代码 代码示例:
h4 a{background:url(http://www.jb200.com/images/w3cbbs/logow3cbbs.png) left top no-repeat;width:300px;height:75px;text-indent:300px; white-space:nowrap; overflow:hidden;}

2,Xhtml代码:
 

复制代码 代码示例:
<h4><a href="#">css网页布局w3c标准</a></h4>

有个问题:
在IE6中,没有得到期望的效果,背景图片和文字都被隐藏了(IE7也是这样,其它的未做测试)。

这里分享二个解决方法:
方法1:将display:inline-block;改为display:block;
方法2:去掉display:inline-block;属性,加float:left;属性。

如此就使用text-indent完美实现了隐藏文字的效果,大家可以自行测试下。