CSS教程:overflow与text-indent:-9999px

2016-02-19 23:48 3 1 收藏

每个人都希望每天都是开心的，不要因为一些琐事扰乱了心情还，闲暇的时间怎么打发，关注图老师可以让你学习更多的好东西，下面为大家推荐CSS教程:overflow与text-indent:-9999px，赶紧看过来吧！

【 tulaoshi.com - Web开发】

作为一个web前端开发
为了html语义化
常常要给内容模块加上一些标题来让页面更有意义
当然还有我们的图片按钮
在抛开css裸奔的情况下也能很顺利的汲取到页面信息
通常为了传达更好的视觉效果
我们常用图片替代掉字体
而早前的前端开发常直接不在html中给出内容
用；（甚至为空）
这样在没有加载到css时就无法知道这个区块究竟是什么内容了

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

这样是不是有些麻烦呢
所以推荐使用
line-height:0;
font-size:0;
overflow:hidden;
能完美隐藏掉你background之上的字体
经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过

而针对input value的隐藏这个方式就有些吃力了
所以还是只能用block加text-indent来偏移模拟隐藏了
display:block;
font-size:0;
line-height:0;
text-indent:-9999px;
经测试 ie6.0 、 7.0 、firefox 3.010 通过

来源:https://www.tulaoshi.com/n/20160219/1630681.html

上一篇：有好多人在身边,却没有想恋爱的冲动.
下一篇： CSS教程:网页字体的设置和控制

看过《CSS教程:overflow与text-indent:-9999px》的人还看了以下文章更多>>

CSS教程:overflow与text-indent:-9999px 02-19
CSS文本:text-indent 02-19
CSS控制段落缩进:text-indent:2em 02-19
CSS教程:text-indent隐藏文字出现虚线框outline 02-19
CSS文本：text-overflow 02-19
CSS基础教程:CSS的Text 文本 02-19
CSS:text-shadow 02-19
CSS:text-transform 02-19
CSS:text-decoration 02-19
CSS教程:水平对齐(text-align) 02-19

CSS文本：text-autospace

标签： Web开发

语法： text-autospace : none | ideograph-alpha|ideograph-numeric | ideograph-parenthesis | ideograph-space 取值： none : 默认值。无调整发生 ideograph-alpha : 在表意字和非表意字(如Latin-based，Greek，Cyrillic，Arabic，Hebrew文本)之间创建额外空格 ideograph-numeric : 在表意字和数字字符之间创建额外空格 ide...

CSS文本：text-justify

标签： Web开发

CSS文本：text-align

标签： Web开发

text-align版本：CSS1 兼容性：IE4+ 继承性：有语法： text-align : left | right | center | justify 取值： left : 默认值。左对齐 right : 右对齐 center : 居中对齐 justify : 两端对齐说明：设置或检索对象中文本的对齐方式。此属性作用于所有块对象(block elements)。在一个 div 对象里的所有块对象的会继...

CSS教程:导致一些问题的overflow

标签： Web开发

overflow有问题吗？没问题。那为什么说要慎用呢？因为有时会导致一些问题。。。关于overflow:auto的，很多人贪他书写方便，直接用来清除浮动。但是Firefox使用overflow:auto会产生focus，引用网友fireyy的评论我想这是FF浏览器的一个可用性和亲和力（usability/accessibility）的设定，当设定了overflow:auto或者 overflow:scroll的元素...

无hack无js全兼容text-overflow-ellipsis效果

标签： Web开发

PS. 由于使用的附件作为图片，使用其他浏览器测试时，保证登录才能看到完整效果。或者点此下载（感谢by0001提供的下载包） ^-^ 三更半夜果然适于思考，办法有点怪，让我们先看看效果：运行代码框 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition...

查看更多精彩>>