当超出宽度时候用省略号，鼠标移动到上面时候显示所有（不用tooltip插件）

1）jquery部分

$(function()
  {
  
  $("#description").hover(function()
  {
  $(this).removeClass("description").addClass("showAll");
 
  },function()
  {
  $(this).addClass("description");
  })
  })

2）两个class类别

   table
   {
    table-layout:fixed;
   }

.description
   {
      font-size:15px;
      font-weight:normal;
width:100%;
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
   }
   /*显示在一行，也不能换行*/
   .showAll
   {
     font-size:15px;
     font-weight:normal;
width:100%;
     word-break:keep-all;/* 不换行 */
     white-space:nowrap;/* 不换行 */
     z-index:10;
    color:red;
   }

3）JSP部分，其中description内容是通过JSTL迭代出来的

 

         
   
   
   
   
 
      
      
   
          
 

文件描述	文件名	操作
${list.description}