CSS3怎样实现超出指定文本以省略号显示效果
css3 实现 显示 效果 指定 文本 怎样 超出
2023-09-11 14:15:00 时间
作者: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>
例如以下图:
相关文章
- css3中什么时候用transition什么时候用animation实现动画
- 用css动态实现圆环百分比分配——初探css3动画
- 结合CSS3的布局新特征谈谈常见布局方法
- 【二次元的CSS】—— 纯CSS3做的能换挡的电扇
- 【CSS3】纯CSS代码实现模拟时钟,+js对时功能。
- css3效果隔两秒旋转然后停两秒再继续旋转,无限循环
- CSS3 transition 属性——逐渐变慢/匀速/加速/减速/加速然后减速
- css3 box-shadow 使用方法详解
- [CSS3] Use media query to split css files and Dark mode (prefers-color-scheme: dark)
- [CSS3] All abourt responsive image
- [CSS3] CSS Background Images
- [CSS3] CSS Display Property: Block, Inline-Block, and Inline
- [CSS3 + HTML5] Modernizr
- CSS3实现鼠标移动到图片上图片变大
- css3 实现心跳
- css3幻灯片换位效果