開發問題:bootstrap表格內信息過長的兩種解決方式

在使用bootstrap table的時候,如果某個單元格中字體過多而寬度不夠的時候,多餘的字體就變成了省略號。
在這裏插入圖片描述

1. 可以做成帶左右滾動條的樣式:
效果圖
在這裏插入圖片描述
在這裏插入圖片描述
代碼:
js中不需要改動,只需要把bootstrap table的樣式做一下改變。

<table class="table text-nowrap" style="min-width:2000px;" id="productOrderTable"></table>

2. 鼠標放置在單元格,字體信息懸浮顯示
在這裏插入圖片描述
代碼:
在js代碼中做改動

{title: '評價內容', field: 'content', visible: true, align: 'center', valign: 'middle', width: '220px',
      formatter: function (value, row, index) {
            return "<span style='display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;' title='" + value + "'>" + value + "</span>";
        }
},
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章