目录
1.单行文本溢出显示省略号--必须满足三个条件2.多行文本溢出显示省略号1.单行文本溢出显示省略号–必须满足三个条件
/* 1.先强制一行内显示文本 */white-space: nowrap;（默认normal自动换行）/* 2.超出的部分隐藏 */overflow: hidden;/* 3.文字用省略号替代超出的部分 */text-overflow: ellipsis;
代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">div {width: 150px;height: 80px;background-color: #00B057;white-space: normal;/* overflow: hidden; *//* text-overflow: ellipsis; */}</style></head><body><div>啥也不说，此处省略一万字</div></body></html>
加了省略号之后
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">div {width: 150px;height: 80px;background-color: #00B057;/* 1.先强制一行内显示文本 */white-space: nowrap;/* 2.超出的部分隐藏 */overflow: hidden;/* 3.文字用省略号替代超出的部分 */text-overflow: ellipsis;}</style></head><body><div>啥也不说，此处省略一万字</div></body></html>
2.多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题，适合于webkit浏览器或移动端(移动端大部分是webkit内核)，还有个方法用js实现
overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制在一个块元素显示的文本的行数 */-webkit-line-clamp: 2;/* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;
上代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">div {width: 150px;height: 80px;background-color: #00B057;overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制在一个块元素显示的文本的行数 */-webkit-line-clamp: 2;/* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;}</style></head><body><div>啥也不说，此处省略一万字啥也不说，此处省略一万字啥也不说，此处省略一万字啥也不说，此处省略一万字</div></body></html>
这里有个问题，显示了第三行的文字，有个解决方法，把高缩小点就行了,正确代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">div {width: 150px;height: 45px;background-color: #00B057;overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制在一个块元素显示的文本的行数 */-webkit-line-clamp: 2;/* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;}</style></head><body><div>啥也不说，此处省略一万字啥也不说，此处省略一万字啥也不说，此处省略一万字啥也不说，此处省略一万字</div></body></html>
