Zerlinda's Blog

css隐藏/显示文字的方法

今天总结了一下在html中用css隐藏文字的方法。

(1)偏移掉字体的方式

使用text-indent:-9999px; 这种方法有一个局限性只适用于块级元素。

(2)字体为零不显示,能完美“隐藏”掉你background之上的字体,经测试 ie6.0 、 7.0 、8.0、firefox 通过

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

(3)display:none

最方便的是加个span,然后display:none,而且这样不会出bug。

遗憾的是,多了个标签,循环中使用的话,html又多了一堆字节,单个按钮推荐这样使用。

(4)CSS不换行隐藏多余文字显示省略号

word-break:keep-all;/* 单词不换行 */
white-space:nowrap;/* 文本不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;
/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/

发表评论

电子邮件地址不会被公开。 必填项已用*标注