CSS3如何实现超出指定文本以省略号显示效果
来源:互联网 发布:淘宝技术删除中差评 编辑:程序博客网 时间:2024/06/05 10:37
作者:zhanhailiang 日期:2014-10-24
不做前端很久了,今天从重构师那里了解到CSS3已经可以实现很多以往必须通过JS才能实现的效果,如渐变,阴影,自动截断文本展示省略号等等强大效果,而且这些功能日渐成熟,已经大量用于生产环境。H5真的日渐成熟了,得恶补下了。
以下分享实现指定文本超出部分以省略号展示的Demo:
<style>.text1 { width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -webkit-text-overflow:ellipsis; -moz-text-overflow:ellipsis; white-space:nowrap;}.text2 { width:200px; word-break:break-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}</style> <div class="text1">热卖精选:从子频道(服饰鞋包,亲子,居家,美妆)档期里面挑选出来,库存大于30%的高信价比商品list,数量为50个</div> <br /> <div class="text2">热卖精选:从子频道(服饰鞋包,亲子,居家,美妆)档期里面挑选出来,库存大于30%的高信价比商品list,数量为50个</div>
如下图:
0 0
- CSS3如何实现超出指定文本以省略号显示效果
- css3实现渐变、阴影、超出指定文本省略号显示等一些效果
- css3实现文本指定行数,超出部分省略号代替
- 浅谈CSS3文本超出长度显示省略号
- 文本内容超出后显示省略号效果
- css3实现文本溢出以省略号形势显示
- CSS3超出显示省略号
- css实现文本超出部分显示省略号
- CSS将超出的文本以省略号显示
- 支持火狐的文本超出隐藏以省略号显示
- HTML超出文本显示省略号...
- 【文本超出显示为省略号】
- 超出文本部分显示省略号
- 实现文本单行显示,超出部分显示省略号(...)
- CSS用text-overflow实现文本标题超出显示省略号“...”
- html+css 实现文本固定长度,超出显示省略号
- 超出指定长度部分以省略号代替
- CSS3文本溢出显示省略号
- 梯度下降(Gradient Descent),一句代码,一个式子
- 第9周 项目2-3 运用for语句做循环程序求正负分数累加和
- spring定时器
- Cookie与Session机制,什么时候用Cookie,什么时候用Session
- Unity3D KeyCode
- CSS3如何实现超出指定文本以省略号显示效果
- 在 Unity 工程 (Project) 中使用 DLL(动态库)
- 金色十月线上编程比赛第二题:解密
- NGUI系列教程五(角色信息跟随)
- hdu 4442 Physical Examination(贪心)
- 对于同学提问问题答案的收集
- Unity3d NGUI系列教程四(自定义Atlas,Font)
- currentStyle、runtimeStyle、getComputedStyle的区别
- Unity项目-了解协同StartCoroutine(2)