目录
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>