1、单行文本控制超出存放区域时使用 "..." 代替的 css 控制如下：
.singleLine{ width:120px; background:#0ff; overflow:hidden;/*多余文字隐藏*/ white-space:nowrap;/*不换行*/ text-overflow:ellipsis;/*多余文字使用"..."代替*/ }
2、多行文本控制超出存放区域时使用 "..." 代替的 css 控制如下：
.multiLine{ width:120px; background:#0ff; overflow:hidden;/*多余文字隐藏*/ text-overflow:ellipsis;/*多余文字使用"..."代替*/ display:-webkit-box;/*盒子模型*/ -webkit-line-clamp:3;/*设置在第三行显示"..." */ -webkit-box-orient:vertical;/*竖直排列*/ } 测试代码及效果图如下所示：
<html> <style type="text/css"> .singleLine{ width:120px; background:#0ff; overflow:hidden;/*多余文字隐藏*/ white-space:nowrap;/*不换行*/ text-overflow:ellipsis;/*多余文字使用"..."代替*/ } .multiLine{ width:120px; /** 可以不指定高度 */ background:#0ff; overflow:hidden;/*多余文字隐藏*/ text-overflow:ellipsis;/*多余文字使用"..."代替*/ display:-webkit-box;/*盒子模型*/ -webkit-line-clamp:3;/*设置在第三行显示"..." ，必须指定，不然没“...”效果*/ -webkit-box-orient:vertical;/*竖直排列*/ } </style> <body> <div class="singleLine"> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 </div> <hr/> <div class="multiLine"> 啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 </div> </body> </html>
