在CSS中隐藏文字的技巧

通常偏移掉字体的方式是:

(1)使用{text-indent:-9999px};

可是他有一个局限性 他只适用于块级元素block而我们往往有时候想偏移掉的a上的字体所以问题就来了text-indent:-9999px;虽然用起来比较惬意将a转化 成block的话 往往 他身后的的元素就被他赶到下一行了如果正好这个a后面 是一个a按钮就要用float来浮动以使他身后再出现簇拥者这样是不是有些麻烦呢

(2){line-height:0;font-size:0;overflow:hidden;}

能完美“隐藏”掉你background之上的字体经测试 ie6.0 、 7.0 、8.0、firefox 通过

(3)最方便的是加个span,然后display:none,而且这样不会出bug。遗憾的是,多了个标签,循环中使用的话,html又多了一堆字节,单个按钮推荐这样使用。

而针对input value的隐藏这个方式就有些吃力了所以还是只能用block加text-indent来“偏移”模拟隐藏了

{display:block;font-size:0;line-height:0;text-indent:-9999px;}

经测试兼容性问题良好,暂未有不兼容问题发生。

想了解更多CSS教程知识可登陆e良师益友网。

时间: 2024-10-03 22:29:42

在CSS中隐藏文字的技巧的相关文章

CSS中隐藏内容的3种方法

CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可以让网页中所有内容不显示,如代码.文字.链接.图片.div层,是推荐的内容隐藏方式. <div style="display:none;">隐藏内容</div> 值 描述 none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. i

css中要求文字必须是一行,超出部分自动隐藏的问题

问题:客户要求文字必须是一行,超出部分自动隐藏.而现在没有办法在php里控制截取字数,只能在前端css里处理. 首页div的宽度是一定的. 处理办法为: word-break: keep-all;/*这个可以不要*/ word-wrap: break-word; white-space: nowrap;<span style="color: rgb(85, 85, 85); font-family: 微软雅黑, PMingLiU, Verdana, Arial, Helvetica, sa

关于CSS中隐藏内容方法的思考

正在读<精通CSS>,很多样式需要用到内容隐藏,比如平时无内容,鼠标悬停时显示出内容.书中常用的方法是用text-indent:-1000em.margin-left:-1000em将元素隐藏到屏幕边缘之外,而display:none和visibility:hidden.overflow:hidden也可以做到隐藏,那么这几种用法有哪些利弊呢? 1.display:none; 搜索引擎可能认为被隐藏的元素属于垃圾信息而忽略,不利于SEO:屏幕阅读器会忽略被隐藏的元素. 2.visibility

CSS中隐藏滚动条的简单实现方法

xhtml中隐藏滚动条 在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个 bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷. 对于这个bug一般有3种解决方案, 方法1: 代码: 程序代码 html { overflow-y: scroll; } 原理:强制显示ie的垂直滚动条,而忽略水平滚动条 优点:完全解决了这个问题, 允许你保持完整的XHTML doctype. 缺点:即

CSS中隐藏滚动条的方法

xhtml中隐藏滚动条 在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个 bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷. 对于这个bug一般有3种解决方案, 方法1: 代码: 程序代码 html { overflow-y: scroll; } 原理:强制显示ie的垂直滚动条,而忽略水平滚动条 优点:完全解决了这个问题, 允许你保持完整的XHTML doctype. 缺点:即

css中的文字

CSS 字体系列 在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace") 特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier") 除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列: Serif 字体 Sans-serif 字体 Monospace 字体 Cursive 字体 Fantasy 字体 字体

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

在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等等. 使用CSS即可使以上提到的内容隐藏起来,几种隐藏内容的方法: 1.使用display:none来隐藏所有内容 display:none可以让网页中所有内容不显示,如代码.文字.链接.图片.div层,是推荐的内容隐藏方式. <div style="display:none;">我不占地儿,你看不见我:</div>

html&amp;css中的文字对齐问题

html&css的使用过程中,我们经常会遇到很多文字对齐问题.下面我要介绍一个有丁点难的文字对齐问题. 实现效果如下图所示. 两行长度不定的文字,要让它们总体水平居中,然后,这两行字要左对齐,如下图所示. 听起来好像挺简单,然而实现起来却...... 错误做法一: 用一个大块div包住两个div,在大div中设置"text-align:center; ",在小div中设置"text-align:left; " 结果如下图所示. 因为div会占据一整行,而不能

教你Xshell中隐藏的小技巧

终端模拟器,一听就是技术宅男们使用的软件,不去看都可以想象那冰冷的色调,机械的敲打,偏偏有个软件不走寻常路,体贴暖心到爆表,本集就为大家细数它xshell的贴心之举. 1. 快速复制内容到记事本 将xshell中的内容复制记事本中,很多人都是复制,打开记事本,粘贴:超麻烦有没有,其实xshell中设置了快速复制的功能,选中需要复制的内容,右键鼠标,然后选择“记事本”,右侧会弹出三个选项:选定区域,全部,当前屏幕:三种选项对应的复制内容如下: 1)全部:就是复制全部的内容 2)选定区域:就是直接复