<!doctype html> <html> <head> <style type="text/css"> //css控制内容过长显示省略号和悬停时显示全部内容 .li1 { list-style:none; width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; margin-top:5px; } .li2{ list-style:none; margin-top:5px; } </style> </head> <body> <ul> <li class="li1" onmouseover="this.className=‘li2‘" onmouseout="this.className=‘li1‘"><a href="#">内容过长显示省略号 鼠标悬停显示1</a></li> <li class="li1" onmouseover="this.className=‘li2‘" onmouseout="this.className=‘li1‘"><a href="#">内容过长显示省略号 鼠标悬停显示2</a></li> <li class="li1" onmouseover="this.className=‘li2‘" onmouseout="this.className=‘li1‘"><a href="#">内容过长显示省略号 鼠标悬停显示3</a></li> <li class="li1" onmouseover="this.className=‘li2‘" onmouseout="this.className=‘li1‘"><a href="#">内容过长显示省略号 鼠标悬停显示4</a></li> <li class="li1" onmouseover="this.className=‘li2‘" onmouseout="this.className=‘li1‘"><a href="#">内容过长显示省略号 鼠标悬停显示5</a></li> </ul> </body> </html>
原文：http://www.cnblogs.com/ShanHeDiao/p/4814075.html