css隐藏/显示文字的方法 |
您所在的位置:网站首页 › css怎么设置字体类型样式图片显示 › 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,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |