主要是以下三步：
<html lang="en"> <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>溢出内容省略号表示</title> <style> li { width: 200px; height: 30px; border:1px solid red; white-space: nowrap; /* 1.强制在同一行内显示所有文本，直到文本结束或遇到br标签对象才换行 */ line-height: 30px; overflow: hidden; /*2. 把超出的部分隐藏起来 */ text-overflow: ellipsis; /* 3.溢出的部分用省略号代替 */ } </style> </head> <body> <li>文字文字文字文字文字文字文字文字文字</li> <li>文字文字文字文字文字文字文字文字文字</li> <li>文字文字文字文字文字文字文字文字文字</li> <li>文字文字文字文字文字文字文字文字文字</li> <li>文字文字文字文字文字文字文字文字文字</li> </body> </html>
效果图如下：
