超出部分以省略号展示
来源:互联网 发布:三级数据库题型 编辑:程序博客网 时间:2024/06/05 12:54
不做前端很久了,今天从重构师那里了解到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
- 超出部分以省略号展示
- 超出指定长度部分以省略号代替
- CSS 超出部分显示省略号
- 超出文本部分显示省略号
- CSS 超出部分显示省略号
- .NET中截取指定长度汉字...超出部分以省略号代替
- 文字超出部分使用省略号(CSS)
- textView 文本字数超出 部分显示省略号
- 文字超出部分用省略号代替
- div&td超出部分省略号表示
- CSS超出部分显示省略号…代码
- CSS实现文字超出部分显示省略号
- css文字超出部分显示省略号
- 61 超出部分显示为省略号
- Android:TextView超出部分自动添加省略号
- 文字超出部分用省略号显示
- 文本超出部分用省略号表示
- CSS超出部分显示省略号…代码
- Mysql几种索引方式的区别及适用情况
- 获得随机数
- JavaScript的document和window对象详解
- 排序--快速排序
- SoapUI做过webService测试
- 超出部分以省略号展示
- sanlyShi的前端之路六:常用input的几种类型
- 开发者不追人工智能就会被淘汰吗?
- 常见HTTP状态(304,200等)
- 如何有效提高asp页面的访问速度
- linux move 实现
- poj-1797-Heavy Transportation [最短路][Dijkstra]
- 接口和抽象类的区别
- 【poj3070】Fibonacci(矩阵)