bootstrap table字符过长成省略号 - 简书
2019-07-01 01:44:49 Author: www.jianshu.com(查看原文) 阅读量:397 收藏

CSS代码

/**字符串过长 转化为 。。。**/
table{
   width:100px;
   table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
td{
   width:100%;
   word-break:keep-all;/* 不换行 */
   white-space:nowrap;/* 不换行 */
   overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
   text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用*/
   -o-text-overflow:ellipsis;
   -icab-text-overflow: ellipsis;
   -khtml-text-overflow: ellipsis;
   -moz-text-overflow: ellipsis;
   -webkit-text-overflow: ellipsis;
}

js代码

$.fn.bootstrapTableEx = function(opt){
    var defaults = {
        url: '',
        dataField: "rows",
        method: 'post',
        dataType: 'json',
        selectItemName: 'id',
        clickToSelect: true,
        pagination: true,
        smartDisplay: false,
        pageSize: 10,
        pageList: [10, 20, 30, 40, 50],
        paginationPreText: '上一页',
        paginationNextText: '下一页',
        sidePagination: 'server',
        queryParamsType : null,
        columns: [],
        onLoadSuccess:function(){
            $('.bootstrap-table tr td').each(function () {
                $(this).attr("title", $(this).text());
                $(this).css("cursor", 'pointer');
            });
        }
        // clickToSelect:false,//点击不选中~
    }

© 著作权归作者所有,转载或内容合作请联系作者


文章来源: https://www.jianshu.com/p/3e91a0940665
如有侵权请联系:admin#unsafe.sh