首页 相关文章 最近整理的一份CSS文字隐藏的demo

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

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

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

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

方法列表 demo

1. 毫无保留:display:none[ 查看全文 ]

2016-02-20 标签:
  • 标签:Web开发
    时间过得真快,离 Reset CSS 研究(八卦篇) 已经 3 个多月了。废话少说,赶紧将技术篇写完吧。 回顾与反思 第一份 reset css 是 Tantek 的 undohtml.css, 很简单的代码,Tantek 根据自己的需要,对浏览器的默认样式进行了一些重置。 Eric 的也是如此。 YUI 除了 cssreset, 还配套有 cssfonts 和 cssbase. cssreset 清除默认样式,cssfonts 和 cssbase 则将一些元素的默认样式重设回来。 很长一段时间...[ 查看全文 ]
  • 标签:ASP
    一、通用源代码格式规则 1.1 开发工具 推荐使用Microsoft  公司的Visual InterDev 来书写ASP 代码,使用Macromedia ? 公司的Dreamweaver 来书写HTML代码,也可以使用UltraEdit、ASPEdit 2000等开发工具。 1.2 缩进空格 缩进空格是指在每一级有两到四个空格。不要在源代码中保留TAB字符,这是因为TAB字符会随着不同用户的不同设置和不同的资源管理工具(打印、文档、版本控制等)而代表不同的宽度...[ 查看全文 ]
  • 你可以每天早上起床或晚间入睡前练习所有的姿势,或采纳你觉得适合你的几种。开始之前,先做2分钟的准备活动。做伸展运动或原地踏步。在练习过程中,每种姿势持续30~60秒。缓慢地深呼吸,感觉空气进入你的肺部。 1.全身伸展这一姿势作用于身体底部的能量中心,即脊椎骨底端。 动作要领:坐在地上,右腿伸向前,左腿从膝(www.tulaoshi.com)盖向里弯,正好碰到右膝内侧,身体慢慢向前伸展...[ 查看全文 ]
  • 标签:设计
    在洽谈设计方案的时候,你要知道如何去看设计作品,这里所说的设计作品,包括了效果图和平面设计作品。在业内,有一些人主导以表现为主,认为图画得好不好是最关键的,而另一些人则认为画得好,不好做得好。当一份设计好的作品放置在眼前时,那么我们究竟去看呢。下面和大家分享如何去看一份设计作品。 首先要从设计方面去看: 1.布局是否合理。 2.是否符合人体工程学,交通线设置是否合理。 3.用色...[ 查看全文 ]
  • 标签:Web开发
    不可换行 NOBR/NOBR (不换行)   overflow 版本:CSS2 兼容性:IE4+ NS6+ 继承性:无   语法:   overflow : visible | auto | hidden | scroll   参数:   visible : 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动...[ 查看全文 ]
  • 标签:电脑入门
            ︶ ̄ 我的心         ︶︶︶︶︶︶      你永远不能猜透。         ︶︶︶︶︶︶             ︶ ̄我的爱         ︶︶︶︶︶︶ ...[ 查看全文 ]
  • 标签:编织
    步骤1: 上绣棚,用水消笔画简易的草图,错了可以用水涂涂,最后泡水就会消失,不会影响最终效果。 步骤2: 用1.5cm宽的红色系丝带打个活结,缝在绣布上,然后反折围绕活结卷,一边卷一边缝固定位置。这种用细线固定比单纯用丝带绣玫瑰会省力很多。 步骤3: 再用1cm宽的黄色系、粉色系的丝带做玫瑰绣,绕少点圈就像花苞,直到填满草图。 步骤4: 用绿色绣线和珠针做立体叶子...[ 查看全文 ]
  • 标签:Web开发
    display:none: 它可以使包括容器本身在内的东西都消失,简便且有效,但它有两个耳熟能详的缺陷,那就是对搜索引擎不友好,且被屏幕阅读器所忽略。 text-indent:-9999px :text-indent是首行缩进,所以对于多行文本,若单独使用它就有明显的不足,需加上white-space:nowrap;来弥补不足,但还有一个问题:物理空间仍然存在,故还需设置line-height:0;或使用超小字体(在IE下有点BUG),最终代码如下: ...[ 查看全文 ]
  • 标签:Web开发
    文字隐藏 应用广泛,但常用的方法没有什么亲和力。 常用文字隐藏方法的缺陷: 1、display:none 这种方法搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略; 屏幕阅读器会忽略被隐藏的文字。 2、visibility: hidden 这种方法隐藏了文字却仍然占据物理空间。 更好的方法: overflow:hidden .class{ display:block;/*统一转化为块级元素*/ width:0; height:0; overflow:hidden; } 从代码...[ 查看全文 ]
  • 标签:Web开发
    1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源。 2、无边框。推荐的写法是 border:none;,哈哈,我一直在用这个。 border:0; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源。 3、慎用 * 通配符。所谓通配符,就是将 CSS 中的所有标签均初始化,不管用的不...[ 查看全文 ]
  • 文字隐藏应用广泛,但常用的方法没有什么亲和力。常用文字隐藏方法的缺陷: 1、display:none 这种方法搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略; 屏幕阅读器会忽略被隐藏的文字。 2、visibility: hidden 这种方法隐藏了文字却仍然占据物理空间。 3、推荐大家使用这个更好的方法: overflow:hidden .class{ display:block;...[ 查看全文 ]
  • 准备好材料,排骨买的时候就叫卖肉的人剁一下,记住要剁得稍微长一些。 将排骨放入开水中焯一下。焯过的排骨用清水再洗一下。 汤锅放入适量清水烧开后放...[ 查看全文 ]
  • 来一份炝莲藕正宗做法/图解/步骤: 1. 生抽,陈醋,盐,加水调汁备用,水可以多点,自己 2. 加少许油,干煸佐料,小火加热至有香味 3. 加水调味汁,慢火煮开即可 4. 莲藕切片焯水,放凉水过凉,可放入少许白醋防止变色 5. 两者相加,一切0K!颜值高还超简单! 搜索来一份炝莲藕做法大全分类: 下饭菜[ 查看全文 ]
  • 什么是人工受孕? 人工受孕,是指将男性精液用人工方法注入女性子宫颈或宫腔内,以协助受孕的方法。 主要用于男性不孕症。人工受孕有配偶间人工受孕、非配偶间人工受孕两种。在男方有性器官异常,如阴茎短小、尿道下裂、阳痿、早泄等症或女方有子宫颈狭窄、不明原因不孕等可用配偶间人工受孕。 关注好网,关注 不孕不育 ,关注您的健康下一代>> 人工受精的整个流程 做人工...[ 查看全文 ]
  • 面粉和酵母装和面盆中,一边加水一边用筷子搅动,待看不到干粉时,用揉手成光滑面团,静放20分钟左右 里脊肉用清水冲洗过后,剁成肉馅,加入浓汤宝用筷子搅拌均匀 ...[ 查看全文 ]
  • 标签:Web开发
    CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来完成这样的任务. 我进行前端开发的时候,测试用的浏览器大致有: IE7, IE6, Opera9(文章撰写时版本为9.25 8825), Safari3(文章撰写时版本为3.0.4 523.15), Firefox2(文章撰写时版本为2.0.0.11). 在正常的 selector { property:value; } 的基础上常会根据具体情况为相同元...[ 查看全文 ]
  • 把奶油奶酪放入大碗中,加入白砂糖,然后隔水加热,用打蛋器搅拌至细腻无颗粒 将蛋黄与蛋白分离,逐个加入蛋黄,并搅拌均匀 加入牛奶和柠檬汁,搅拌均匀...[ 查看全文 ]
  • 标签:PS PS教程
      以前在网上看到过一种图片,原图是一个人,按CTRL+A后就变成另一个人,非常好奇,百思不得其解,偶尔,看了糖果果的隐形彩照教程后,顿悟,就做了一个自己称为“双层彩照”的东东贴在这里,没想到感兴趣的朋友挺多,我不敢独享,写出这个非常粗糙的东东来算是抛砖引玉吧。 最终效果: 1.打开两幅素材 2.将“女人”全选,粘贴在“武生”上。 3.调整“女人”也就...[ 查看全文 ]
  • 如何制作出一份对设计师、产品经理、程序员都有价值的设计规范?今天奇维用淘宝2015的规范优化实战案例,结合之前在腾讯CDC经历过的雅虎、QQ、金蝶等设计规范,给同学们聊聊他所理解的规范,以及如何完成一套产品性质的规范,全文高能干货,收。 别人常问我的花名是什么意思,是否期望具备奇特思维?然而并没有,那是前公司昵称的音译,以感恩及怀念志同道合的逗逼们一起成长的日子。别人也常问kiwi是什么意思...[ 查看全文 ]
  • 标签:Web开发
    说明为什么现有的几种CSS隐藏文字的方法的缺陷和新的方法如何弥补。实用性一般,但是这个方法挺新颖的。 1.display:none;的缺陷 搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略 屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。 2. visibility: hidden ;的缺陷 这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间 ...[ 查看全文 ]
手机页面 收藏网站 回到头部