实现效果

  • 限制列的宽度,溢出部分为省略号
  • 当鼠标悬浮到此处时,展开全部内容

样例代码

  • 修改以下样例代码中的列名即可
  • 可根据需要调整CSS中的宽度和高度
<style>
.content_hover_show {
  display:block;
  word-break:break-word;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  width:300px;
  height:16px;
}
.content_hover_show:hover {
  display:block;
  white-space:normal;
  overflow:hidden;
/*  max-height:200px;*/
  cursor:default;
  height:auto;
}
</style>
<script>
    $(document).ready(function () {
        var columnName='c_voucherRemark';//设置列名
        var className='content_hover_show';
        $('td.column_'+columnName).each(function(){
            var tdHtml=$(this).html();
            $(this).html('<div class="'+className+'">'+tdHtml+'</div>');
        });
    });
</script>
  • No labels