以前实现这种效果需要在程序里判断字符的长度,如果长度大于多少个字符,就截取字符,用省略号代替,而且是在服务器处理的,现在只需要用css的属性来操作,简单、实用、节省性能、不用做过多的程序判断、节约开发时间，可谓一举多得。在此分享一下，欢迎交流
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>text-overflow</title> <style type="text/css"> .test_demo{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:100px; background:#0094ff; color:#FFF; padding:10px; margin:10px; border-radius:5px; } .test_demo:hover{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:100px; background:#337ab7; color:#FFF; padding:10px; margin:10px; border-radius:5px; } </style> </head> <body> <div class="test_demo">超酷的IT技术学习平台（我是省略号）</div> </body> </html>