这个同时需要. text-overflow ; overflow ; white-space ; width ; 四个属性才可以.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css实现省略号</title> <style type="text/css"> /***超出长度显示省略号. 还需要设置width**/ .ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } ul > li { border: 1px solid red; width: 200px; } </style> </head> <body> <ul> <li class="ellipsis" >测试一,测试一,测试一,测试一</li> <li class="ellipsis" >测试二</li> <li class="ellipsis" >测试三,测试三,测试三,测试三</li> </ul> </body> </html>
效果:
参考链接: