一 ： css单行省略号
单行溢出，超出部分显示...或者截取。前提必须有宽度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=å, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> div { width: 200px; padding: 10px; box-sizing: border-box; height: 100px; border: 1px salmon solid; } div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> <body> <div> 陌生人，我也为你祝福 愿你有一个灿烂的前程 愿你有情人终成眷属 愿你在尘世获得幸福 我只愿面朝大海，春暖花开 </div> </body> </html>
二 ： css多行省略号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=å, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> div { width: 200px; box-sizing: border-box; border: 1px salmon solid; } div { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } </style> <body> <div> 陌生人，我也为你祝福 愿你有一个灿烂的前程 愿你有情人终成眷属 愿你在尘世获得幸福 我只愿面朝大海，春暖花开 </div> </body> </html>
适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
注：
1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2.display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3.-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式;
三： 浏览器兼容的方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=å, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> div { position: relative; line-height: 1.4em; /* 3 times the line-height to show 3 lines */ width: 252px; height: 4.2em; overflow: hidden; } div::after { content: "..."; font-weight: bold; position: absolute; bottom: 0; right: 0; } </style> <body> <div> 陌生人，我也为你祝福 愿你有一个灿烂的前程 愿你有情人终成眷属 愿你在尘世获得幸福 我只愿面朝大海，春暖花开 </div> </body> </html>