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随笔)