CSS隐藏网页文字的几种常用方法

夜半学狼吼

夜半学狼吼

2016-02-19 23:12

下面图老师小编要向大家介绍下CSS隐藏网页文字的几种常用方法,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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


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

overflow:hidden:

这是一个比较合理且我最喜欢的方法(网页教学网站长注),具体代码如下:


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

positon:absolute:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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


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

展开更多 50%)
分享

猜你喜欢

CSS隐藏网页文字的几种常用方法

Web开发
CSS隐藏网页文字的几种常用方法

CSS教程:CSS让网页文字自动隐藏

Web开发
CSS教程:CSS让网页文字自动隐藏

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS教程:自动隐藏网页文字的技巧

Html CSS布局 Div+CSS XHTML
CSS教程:自动隐藏网页文字的技巧

网页中用CSS样式表隐藏文字

Web开发
网页中用CSS样式表隐藏文字

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

网页中用CSS样式表隐藏文字的挺新颖方法

Web开发
网页中用CSS样式表隐藏文字的挺新颖方法

CSS教程:CSS放入网页的几种方式

Web开发
CSS教程:CSS放入网页的几种方式

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

CSS:用overflow代替left截取指定长度字符串

CSS:用overflow代替left截取指定长度字符串

摄像头不能用怎么办?

摄像头不能用怎么办?
下拉加载更多内容 ↓