1.單行文本溢出需要滿足三個條件：
overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
2.多行文本溢出需要滿足下面幾個條件：
display:-webkit-box; overflow:hidden;
text-overflow:ellipsis; word-break:break-all;
-webkit-box-orient:vertical; //子元素應該被水平或垂直排列
-webkit-line-clamp:3; //3行后顯示省略號
例子如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>h5</title> </head> <style type="text/css"> *{ margin: 0; padding: 0; } .inoneline { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .intwoline { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-break:break-all; -webkit-box-orient: vertical; -webkit-line-clamp:3; } </style> <body> <div class="inoneline">世界很小 我陪你去到天涯海角在沒有煩惱的角落里停止尋找在無憂無慮的時光里慢慢變老</div> <div class="intwoline">一次就好我帶你去看天荒地老在陽光燦爛的日子里開懷大笑在自由自在的空氣里吵吵鬧鬧 你可知道我會你的想要世界很小我陪你去到天涯海角在沒有煩惱的角落里停止尋找在無憂無慮的時光里慢慢變老你可知道我全部的心跳隨你跳一次就好我帶你去看天荒地老在陽光燦爛的日子里開懷大笑在自由自在的空氣里吵吵鬧鬧你可知道我會你的想要</div> </body> </html>
效果如下：
