1.超出一行点点显示
.ellipsis-1{ white-space: nowrap; //不换行 overflow: hidden; //超出宽度隐藏 text-overflow: ellipsis; //超出宽度点点显示 }
2.超出两行点点显示
.ellipsis-2{ overflow: hidden; //超出宽度隐藏 text-overflow: ellipsis; //超出宽度点点显示 display: -webkit-box; //将对象作为弹性伸缩盒子模型显示 -webkit-line-clamp: 2; //限制在一个块元素显示的文本的行数 -webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式 }
3.超出三行点点显示
.ellipsis-3{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }