最近整理的一份CSS文字隐藏的demo


{ hide_text } CSS文字隐藏总结报告

最近整理的一份CSS文字隐藏的demo,总结了几种方法,希望得出一种最完美的方案放进自己的代码片段,可是,到最后却陷入一种重复不断地推翻结论的境地。因为需要考虑的应用场景和元素实在太多,放下浏览器不谈,不同的应用终端,不同的标签结构会有不一样的最优方案,因此,与其希望在工作上多“偷一些懒”,不如平常多巩固积累基础的知识,在需要权衡的时候,便能更加得心应手。

因为自己经验尚浅,demo部分难免会有错漏情况,如发现问题,望大家能指出。

方法列表 demo

1.   毫无保留:display:none

代码片段:

(x)HTML

<p class="hide_display">我是打酱油的文本</p>

CSS

/* 暴力隐藏 */
.hide_display{display:none;}

兼容性:

优点:

  • 方便、快捷
  • 兼容性好

缺点:

  • 屏幕阅读器无法阅读
  • 超链接不适用
  • 图片替代文本需要其他标签的背景
  • 影响搜索排名
  • 大量使用容易被认为是SEO作弊

2.   折中选择:overflow:hidden/position:absolute/visibility:hidden

代码片段:

(x)HTML

<span class="hide_overflow">我是一号打酱油的文本</span> 
<p class="hide_position">我是二号打酱油的文本</p> 
<p class="hide_visibility">我是三号打酱油的文本</p>

CSS



相关阅读:
VML应用实例大全
Windows7系统是有史以来最安全的操作系统
同台服务器使用缓存APC效率高于Memcached的演示代码
javascript+mapbar实现地图定位
在Windows 7上配置管理IIS日志记录
如何给Linux操作系统减肥上
使用户点击后退按钮使效三行代码
合理利用HTML标记优化网页布局
mssql2005注入方法小结
网页设计制作CSS实现隔行换色两种方法
WordPress模板制作过程中的错误定位方法
CSS中的滑动门技术
php 数组的指针操作实现代码
Javascript 判断Flash是否加载完成的代码
快速导航

Copyright © 2016 phpStudy |