春天来了!你看,融化的冰水把小溪弄醒了。 "丁粳、丁粳 ",它就像大自然的神奇歌手,唱着清脆悦耳的歌,向前奔流……
在前端web的一些特殊场合下,有时假需要对HTML元素中的文字讲行隐藏,如果使用JS脚本的话,可以很方便实现文字的隐藏,但如果使用CSS样式来搞呢。下面就说二种利用CSS轻松实现隐藏元素文字的方法。
CSS隐藏HTML元素文字的方法
1、使用css font-size 属性来隐藏文字
css font-size属性是控制文字大小的方法,如果将其的值设置为 0 ,则其控制的HTML元素内的文字则会实现隐藏的效果。
例:
<html>
<head>
<title>HTML隐藏元素的文字</title>
<style>
.main{
color:#888;
font-size: 0px; /*文字的大小设置为0*/
border:1px solid #ccc;
}
</style>
</head>
<body>
<div class='main'>
<p>这是一段用于测试的文字!</p>
<p>本内容来源:</p>
</div>
</body>
</html>注:如果使用 font-size: 0px; 来隐藏文字的话,个别情况下会出现样式错位的情况,这个应该注意!
2、使用css text-indent 属性来隐藏文字
css text-indent 用于文本的首行缩进,如果使用负值的话,则会向左偏移,实现隐藏文字的效果!
例:
<html>
<head>
<title>HTML隐藏元素的文字</title>
<style>
.main{
color:#888;
font-size: 18px;
text-indent : -99999px; /*设置一个大的负值*/
border:1px solid #ccc;
}
</style>
</head>
<body>
<div class='main'>
<p>这是一段用于测试的文字!</p>
<p>本内容来源:</p>
</div>
</body>
</html>注:一般来说如果使用CSS来隐藏文字,就推荐使用 text-indent 属性!
以上就是 CSS隐藏文字的方法。对于钱这个问题,拿还是不拿,挣还是不挣,很简单,问问良心,它说可以就可以;它说不可以,就坚决不可以。更多关于 CSS隐藏文字的方法请关注haodaima.com其它相关文章!