1. 单行文本溢出显示省略号：
1.1、方法：
1. 先强制一行内显示文本*/ white-space: nowrap; （ 默认 normal 自动换行）
2. 超出的部分隐藏*/ overflow: hidden;
3. 文字用省略号替代超出的部分*/ text-overflow: ellipsis;
1.2、代码：
<!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> .main { width: 300px; height: 300px; background-color: pink; margin: 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <div class="main"> 噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。 问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！ </div> </body> </html>
2、 多行文本溢出显示省略号：
2.1、方法：
1、超出的部分被隐藏
overflow: hidden;
2、溢出的部分用省略号显示
text-overflow: ellipsis;
3、 弹性伸缩盒子模型显示
display: -webkit-box;
4限制在一个块元素显示的文本的行数
-webkit-line-clamp: 2;
5、设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;
2.2、代码：
<!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> .txt { width: 400px; background-color: skyblue; margin: 0 auto; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } </style> </head> <body> <div class="txt"> 噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。 问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！ </div> </body> </html>
