效果图： 直接写代码了
单行文本溢出适用于标题 多行文本溢出适用于文章内容
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style type="text/css"> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style type="text/css"> .inline, .intwoline { width: 100px; display: -webkit-box; display: -moz-box; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-line-clamp: 2; } .inline { -webkit-line-clamp: 1; } } </style> </head> <body> <div > <p class="inline">单行文本溢出单行文本溢出单行文本溢出单行文本溢出</p> </div> <div > <p class="intwoline">多234行文溢s7出多行文35本溢出aas多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出</p> </div> </body> </html>