JS加成显示

今天遇到个小问题，在MVC4中，有个字段的长度太长，把页面撑得很难看，所以写个JS让它变成加成显示，在长度超过10的时候，就显示‘......’，鼠标移上去就会显示全部内容。

假设有一张表，存了ID和Reason两个字段，在页面把它取出来

<table >
      <thead>
          <tr>
             <th>账号</th>
             <th>原因</th>

          </tr>
      </thead>

 @if (!Model.IsQueryResultEmpty)
                {
                    foreach (var item in Model.Result.Items)
                    {
                    <tbody>
                        <tr>

                           <td>@item.ID</td>

                           <td>@if (item.Reason != null && item.Reason.Length > 10)
                                    {
                                        <div class="td-wp">
                                            <span  <span class="show_reason">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.......&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>                
                                            <div class="pshow_box" style="display: none;width: 120px;text-align: left;"> <span      class="tip-bg"></span>                                       
                                             @Html.Raw(item.Reason)
                                            </div>
                                        </div>
                                    }
                                    else
                                    {
                                        @item.Reason
                                    }
                            </td>

 </tbody>                   

  }        

         }           

      else             

    {              

       <tbody>       

                  <tr>         

                    <td colspan="2" style="text-align: left">没有查询到相关数据</td>     

                    </tr>                  

   </tbody>            

     }

            </table>

<script type="text/javascript">  

   $(function () {

        /* 显示/隐藏禁用原因*/       

  var $show_reason = $(".show_reason");      

   $show_reason.hover(           

  function () {                

$(this).parent().find(".pshow_box").show();            

},            

function () {                

$(this).parent().find(".pshow_box").hide();            

}        

);           

})

</script>