css隐藏内容的方法有三种:即display:none、visibility:hidden、overflow:hidden。

  1.display:none;的缺陷:

  搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略

  屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。

  

  2.visibility: hidden ;的缺陷:

  隐藏的内容会占据他所应该占据物理空间。

  3.overflow:hidden;一个比较合理的方法

  .texthidden { display:block; overflow: hidden; width: 0; height: 0; }

  将宽度和高度设定为0,然后超过部分隐藏,就会弥补上述1、2方法中的缺陷,也达到了隐藏内容的目的。

css之隐藏内容的方法的更多相关文章

  1. CSS中隐藏内容的3种方法及属性值

    CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

  2. CSS中隐藏内容的3种方法

    CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可 ...

  3. div+css隐藏内容样式方法

    div css隐藏内容样式方法     div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...

  4. CSS实现隐藏滚动条并可以滚动内容

    方法一: 计算滚动条宽度并隐藏起来,其实我只是把滚动条通过定位把它隐藏了起来,下面给一个简化版的代码: <div class="outer-container"> &l ...

  5. CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)

    建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义. 在CSS中如何以图代字,找 ...

  6. 【前端】CSS隐藏元素的方法和区别

    CSS隐藏元素的方法和区别 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. 隐藏内容但仍保持占位的css写法

    通常显示和隐藏内容都会用display:block;和display:none; 如果想要保持内容的占位可以用visbility:visible; 和visiblity:hidden;来控制内容的显示 ...

  8. 您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭

    一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...

  9. HTML5--》点击显示隐藏内容

    <details>浏览器支持比较差,可以用JavaScript实现这种功能. <!doctype html> <html> <head> <met ...

随机推荐

  1. css div 细边框

    .item{ max-width:48%; float:left; padding:2px; border-top:1px solid #000; border-left:1px solid #000 ...

  2. Java Serializable接口(序列化)理解及自定义序列化

      1 Serializable接口 (1)简单地说,就是可以将一个对象(标志对象的类型)及其状态转换为字节码,保存起来(可以保存在数据库,内存,文件等),然后可以在适当的时候再将其状态恢复(也就是反 ...

  3. Python之禅及释义

    在python shell中敲 import this会触发一个彩蛋,神奇的打印下面一段话: The Zen of Python, 即python之禅, 1999年Tim Peters大牛总结的&qu ...

  4. 8、公司的上市问题 - CEO之公司管理经验谈

    在公司发展到一定阶段之后,CEO就能够考虑公司上市的问题了.一条线路,就是先成立公司,进行投资,然后上市赚取利润,根据不同公司的总经理的想法不同而定.这条路是现在很多公司领导要求的做法.因为,通过发行 ...

  5. linux 操作中命令备忘

    1 使用grep 查询关键内容 如果你想在当前目录下 查找"hello,world!"字符串,可以这样: grep -rn "hello,world!" * * ...

  6. bash脚本之数组学习

    在bash中可使用索引数组和关联数组,bash在4.0版本之后才添加了对关联数组的支持 一.索引数组 1.定义索引数组 # 方式1 array_value=(1 2 3 4 5 6)或者array_v ...

  7. How It Works: CMemThread and Debugging Them

    The wait type of CMemThread shows up in outputs such as sys.dm_exec_requests.  This post is intended ...

  8. js设置元素class方法小结及classList相关

        给DOM元素设置class是我们在项目中非常容易遇到的,网上的资料和总结也比较多,下面比较全面的整理一下,希望给到大家一些帮助!并引用两种成熟的classList的兼容方法 一.el.setA ...

  9. TreeMap 源码分析

    简介 TreeMap最早出现在JDK 1.2中,是 Java 集合框架中比较重要一个的实现.TreeMap 底层基于红黑树实现,可保证在log(n)时间复杂度内完成 containsKey.get.p ...

  10. [TLSR8266] 1、搭建tlsr8266编译框架在win服务器中

    前言 泰凌微TLSR8266蓝牙芯片的开发环境在win桌面系统中搭建起来比较简单,在其论坛SDK版块->Telink IDE中可以找到安装包,直接安装即可生成基于Eclipse的开发环境,及相关 ...