单行文字溢出省略号显示
步骤：
1.强制文字一行显示
white-space: nowrap;
2.溢出部分隐藏起来
overflow: hidden；
3.文字溢出的时候用省略号显示
text-overflow: ellipsis;
效果：
样式：
.ov-es{margin: 100px auto;width: 100px;height: 50px;background-color: orange;/* 1.强制文字一行显示 */white-space: nowrap;/* 2.溢出部分隐藏起来 */overflow: hidden;/* 3.文字溢出的时候用省略号显示 */text-overflow: ellipsis;}
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.ov-es{margin: 100px auto;width: 100px;height: 50px;background-color: orange;/* 1.强制文字一行显示 */white-space: nowrap;/* 2.溢出部分隐藏起来 */overflow: hidden;/* 3.文字溢出的时候用省略号显示 */text-overflow: ellipsis;}</style></head><body><div class="ov-es">此处省略100个文字，用省略号显示</div></body></html>
多行文字溢出省略号显示
步骤：
1.溢出部分隐藏起来
overflow: hidden;
2.溢出部分用省略号显示
text-overflow: ellipsis;
3.让普通盒子变成弹性伸缩盒子
display: -webkit-box;
4.第几行显示省略号
-webkit-line-clamp: 2;
5.设置弹性伸缩盒子的子元素的排列方式
-webkit-box-orient: vertical;
效果：
样式：
在这里插入代码片 .ov-es{margin: 100px auto;width: 100px;height: 44px;background-color: orange;/* 1.溢出部分隐藏起来 */overflow: hidden;/* 2.溢出部分用省略号显示 */text-overflow: ellipsis;/* 3/让普通盒子变成弹性伸缩盒子 */display: -webkit-box;/* 4.第几行显示省略号 */-webkit-line-clamp: 2;/* 5.设置弹性伸缩盒子的子元素的排列方式 */-webkit-box-orient: vertical;}
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.ov-es{margin: 100px auto;width: 100px;height: 44px;background-color: orange;/* 1.溢出部分隐藏起来 */overflow: hidden;/* 2.溢出部分用省略号显示 */text-overflow: ellipsis;/* 3/让普通盒子变成弹性伸缩盒子 */display: -webkit-box;/* 4.第几行显示省略号 */-webkit-line-clamp: 2;/* 5.设置弹性伸缩盒子的子元素的排列方式 */-webkit-box-orient: vertical;}</style></head><body><div class="ov-es">此处省略100个文字，用省略号显示</div></body></html>
