bootstrapTable 内容过长处理

控制 bootstrapTable 内容过长处理，有两种方式

• 字符串长度截取
• CSS 宽度限制

只看代码 。

1、伪代码

function load() {
    $('#div1').bootstrapTable({
          method: 'get',
          url: prefix + "/list",         
          columns: [              
              {
                  field: 'id', // 列字段名
                  title: '序号', // 列标题
                  width: 80,
              },
             //....
              {
                  field: 'params',
                  title: '参数',
                  width: 350,
                 // cellStyle: bootstrapTableFieldCellStyle(250,350) ,  // 方法3
                  formatter: function(value, row, index) {
                  	  var showStrNum = 80 ;									
					  return bootstrapTableFieldSubstr(value, row, index, showStrNum );  // 方法1
				  }
              },            
             //....
          }]
     });
}

 // 方法1、长度截取
/*
 * 判断备注内容是否长度过长，先截取后，再加上省略号。
 */
function bootstrapTableFieldSubstr(value, row, index, showStrNum) {
  
    value = $.trim(value);
    if ( value == "" ) {
    	return "";
    }
    //自定义单元格内容
    var span = document.createElement('span');
    //写入面板标题
    span.setAttribute('title', value);
    span.setAttribute('style', "word-wrap: break-word;word-break: break-all;");
    
    span.innerHTML =value;
    if(value.length > showStrNum){
        span.innerHTML = value.substring(0,(showStrNum-1))+"...";
    }
   
    //将面板返回至单元格展示
    return span.outerHTML;
}

// 方法2、 与方法1的区别是，截掉前面的字符，保留后面的字符
function bootstrapTableFieldSubStart(value, row, index, showStrNum) {
	 //判断备注内容是否为空，为空则设置为空字符
	 if (value == null || value == '') {
		 value = "";
	 }
	 //自定义单元格内容
	 var span = document.createElement('span');
	 //写入面板标题
	 span.setAttribute('title', value);
	 span.setAttribute('style', "word-wrap: break-word;word-break: break-all;");

	 span.innerHTML =value;
	 if(value.length > showStrNum){
		 span.innerHTML = "..."+ value.substring((value.length-showStrNum));
	 }

	 //将面板返回至单元格展示
	 return span.outerHTML;
 }

// 方法3、 Css 宽度限制
function bootstrapTableFieldCellStyle(minWidth, maxWidth) {
    return {
        css: {
            "min-width": (minWidth ||"100")+"px" ,
			"max-width": (maxWidth ||"250")+"px" ,
            "white-space": "nowrap" ,
            "text-overflow": "ellipsis" ,
            "overflow": "hidden" ,            
        }
    };
}

2、优缺点：

• 字符串长度截取：字符串可以显示多行；相同的长度，汉字和字母的宽度是不一样的，显示不整齐。（见下面截图）
• CSS 宽度限制 ： 字符串只能显示一行；相同的宽度，汉字数量少，字母数量多，更整齐。

3、效果