css隐藏/显示文字的方法

您所在的位置:网站首页 css怎么设置字体类型样式图片显示 css隐藏/显示文字的方法

css隐藏/显示文字的方法

#css隐藏/显示文字的方法| 来源: 网络整理| 查看: 265

最近做了一个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,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3