CSS掩藏文本的6种方式

日期:2021-03-07 类型:科技新闻 

关键词:小程序怎么做,凡科网小程序,微信小程序界面,线上报名小程序,微信小程序页面制作

做为1个web前端开发开发设计,以便html词义化,经常要给內容控制模块再加1些题目来让网页页面更成心义,自然也有大家的照片按钮,在抛开css裸奔的状况下也能很圆满的吸取到网页页面信息内容,一般以便传递更好的视觉效果实际效果,大家常见照片取代掉字体样式,而早期的前端开发开发设计常立即不在html中得出內容,用 (乃至为空),这样在沒有载入到css时就没法了解这个区块到底是甚么內容了

正题刚开始,一般偏位掉字体样式的方法是:

1、应用text-indent:⑼999px;

但是他有1个局限性 他只可用于块级元素block,而大家常常有时想偏位掉的a上的字体样式,因此难题就来了,text-indent:⑼999px;尽管用起来较为惬意,将a转换成block的话 常常 他背后的的元素就被他赶到下1行了,假如恰好这个a后边 是1个a按钮,就要用float来波动以使他背后再出現拥簇者,这样是否一些不便呢

2、应用line-height:0;

拷贝编码
编码以下:
font-size:0;
overflow:hidden;

能完善“掩藏”掉你background之上的字体样式
经检测 ie6.0 、 7.0 、8.0、firefox 3.010 根据

3、最便捷的是加个span,随后display:none,并且这样不容易出bug。
遗憾的是,多了个标识,循环系统中应用的话,html又多了1堆字节,单独按钮强烈推荐这样应用。

而对于input value的掩藏这个方法就一些费劲了
因此還是只能用block加text-indent来“偏位”仿真模拟掩藏了
display:block;
font-size:0;
line-height:0;
text-indent:⑼999px;
经检测 ie6.0 、 7.0 、firefox 3.010 根据

4、display:none:它可使包含器皿自身在内的物品都消退,简单且合理,但它有两个耳熟能详的缺点,那便是对检索模块不友善,且被显示屏阅读文章器所忽视。

5、overflow:hidden:
这是1个较为有效且我最喜爱的方式(脚本制作之家站长注),实际编码以下:
下列为引入的內容:

拷贝编码
编码以下:

.texthidden{
display:block;/*统1转换为块级元素*/
overflow:hidden;
width:0;
height:0;
}

6、positon:absolute:
用肯定精准定位将其推出可视性区,但是尽管可视性性不存在,但仍占有物理学室内空间,与掩藏文本的服务宗旨相背
下列为引入的內容:


拷贝编码
编码以下:

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

注:后边的3种方式尽管还可以完成掩藏文本实际效果,但不强烈推荐。