CSS隐藏多余文字的几个方法
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:editor 阅读 434
通常偏移掉字体的方式是(1)使用text-indent:-9999px可是他有一个局限性他只适用于块级元素block而我们往往有时候想偏移掉的a上的字体所以问题就来了text-indent:-999

通常偏移掉字体的方式是

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

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

(2)

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

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

而针对input value的隐藏这个方式就有些吃力了 所以还是只能用block加text-indent来“偏移”模拟隐藏了 display:block; font-size:0; line-height:0; text-indent:-9999px; 经测试 ie6.0 、 7.0 、firefox 3.010 通过 (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,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。

 

 

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2