css隐藏/显示文字的方法

最近做了一个demo，写了一个图片轮播，在图片轮播的时候显示对图片的文字解释，要求文字不跟随图片滚动默认显示。花了一点点时间，解决了这个办法，最后总结了一下在html中用css隐藏文字的方法。

（1）偏移掉字体的方式
使用text-indent:-9999px; 这种方法有一个局限性只适用于块级元素。
（2）字体为零不显示，能完美“隐藏”掉你background之上的字体，经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过

         line-height:0;font-size:0;overflow:hidden;

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

(4)CSS隐藏多余文字
　　text-overflow : clip | ellipsis

　　参数：
　　clip : 　不显示省略标记（…），而是简单的裁切
　　（clip这个参数是不常用的！）
　　ellipsis : 　当对象内文本溢出时显示省略标记（…）

　　说明：
　　设置或检索是否使用一个省略标记（…）标示对象内文本的溢出。
　　请您注意，text-overflow:ellipsis属性在FF中是没有效果的。

　　示例：
　　div { text-overflow : clip; }

　　text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text-overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。

css隐藏/显示文字的方法相关推荐

html点击后按钮本身文字变化,javascript实现点击后变换按钮显示文字的方法
本文实例讲述了javascript实现点击后变换按钮显示文字的方法.分享给大家供大家参考.具体实现方法如下: 显示一些按钮,如果点击了, 当前点击的按钮文本变为"点了",其他按钮文 ...
html输入框多出的字隐藏,input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图输入框默认状态: 输入框获取焦点状态: 大家可以看效果图的搜索输入框,默认显示着"用户名/Email"的提示,当 ...
js隐藏显示div页面方法
今天呢,给大家分享一下,通过js来隐藏显示首先,先上图这是js代码这是H5及css样式效果图,由于用于测试,比较简陋,不要在意,哈哈哈哈! 给大家测试代码,有需要可以复制 <scrip ...
php 上标和下标,css如何显示文字的上标和下标
在css中,可以使用vertical-align 属性的sub.super或者text-top.text-bottom属性值来显示文字的上标和下标.下面我们就来介绍一下css vertical-ali ...
input禁止光标_利用css隐藏input的光标方法
如何在不影响操作的情况下,把input的光标隐藏了?在网上搜索了很多方式:用p模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,于是最后终于找到了一种完美 ...
css 隐藏光标,利用css隐藏input的光标方法
如何在不影响操作的情况下,把input的光标隐藏了?在网上搜索了很多方式:用p模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,于是最后终于找到了一种完美 ...
CSS隐藏元素五种方法
css隐藏元素的方法 1.利用opacity透明度来隐藏,opacity设置为0,它只是一种视觉隐藏,元素本身依旧占用它的位置并对网页的布局起到作用,它也同样影响用户交互.在读屏软件中会被识别. 2. ...
jQuery的隐藏显示hide(),show()方法
以前我们在js中如果要隐藏显示一个元素我们需要利用display等于none来设置并且还没有效果,现在在jquery中有了hide();我们可以利用hide()方法来操作,希望本文章给大家所有帮助. ...
CSS隐藏多余文字的几个方法
通常偏移掉字体的方式是 (1) 使用text-indent:-9999px; 可是他有一个局限性他只适用于块级元素block 而我们往往有时候想偏移掉的a上的字体所以问题就来了 text-inde ...

css隐藏/显示文字的方法

css隐藏/显示文字的方法相关推荐

最新文章

热门文章