需求：由於個別列資訊過長，導致整個表格顯示很不美觀，需要將表格設定成固定寬度，超出部分顯示省略號，滑鼠懸停顯示全部資訊。

如果只看結果，可略過以下文字部分，直接按照紅色文字步驟進行：

首先想到的是html的title樣式，當然也是最適合的，但是由於bootstrap table的html都是封裝的，不可能完全獲取dom元素進行更改，當然也不是最明智的方法，

嘗試上網上找一些相關的   模擬用css模擬title樣式的程式碼，但是幾乎全是一個版本，而且與本需求也不符合，而且bootstrap table中又沒有懸停事件，當然直接操作dom元素不考慮。

最後想到的方法是  formatter  方法，首先要給該列新增樣式，讓超出部分顯示省略號

1.新增樣式

.colStyle {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

在bootstrap table配置部分的columns裡如下寫

2.為bootstrap進行配置

{field: 'params', title: "引數",width:300,class:'colStyle',formatter:paramsMatter},

至此，樣式已經引入，該列寬度為300px，超出部分顯示省略號，如圖

剩下的就是paramsMatter函數了，之所以用formatter是因為這個方法只是對頁面顯示做更改，並不會影響資料的獲取等的使用。

接下來就是paramsMatter函式的書寫了，我的方法是在表格的td裡面再加一個span標籤，給span加title

3.書寫formatter函式

function paramsMatter(value, row, index) {
    var values = row.params;//獲取當前欄位的值
    //替換空格，因為字串拼接的時候如果遇到空格，會自動將後面的部分截掉，所有這裡用html的轉義符
    // 代替
    values = values.replace(/\s+/g,' ')
    return "<span title="+values+">"+row.params+"</span>"
}
 

4. 頁面顯示

但是發現顯示並不是特別好，如果能夠換行就可以了，首先想到的是匹配  },   然後加一個\n換行，但是發現span是字串拼接的方法拼上的，遇到換行就自動截掉了，又想到用<br>，但是發現在title中並不能實現，由於是return方式新增的，又不能直接操作dom節點給title賦值。

最後想到的是乾脆建立一個dom節點

5.改進版，解決不能自定義換行問題

  function paramsMatter(value, row, index) {
       var values = row.params;
       values = values.replace(/\s+/g,' ')//替換空格
       values = values.replace(/\},/,'},\n');//換行
       var span=document.createElement('span');
       span.setAttribute('title',values);
       span.innerHTML = row.params;
       return span.outerHTML;
  }