Bootstrap table列内容过长，显示固定长度，超过内容隐藏

今天在使用bootstrap的时候，某一列的内容长度过于长，导致table表格显示错位，非常的不美观，因此，觉得想一个办法，将其所在列的宽度设置为定值，令其超过指定长度的时候，隐藏超过指定长度的内容，过于长的部分在某位用...显示，提高用户的体验度，最后在鼠标移入在单元格的时候，能够显示全部信息。

解决办法：在解决该问题中，我找到了以下2种办法，亲测有效

第一种办法:在table column中进行设置

 {field: 'url',title: '发帖地址',cellStyle: function (value, row, index) {return {css: {"min-width": "100px","white-space": "nowrap","text-overflow": "ellipsis","overflow": "hidden","max-width": "200px"}}},formatter: function (value, row, index) {return "" + value + "";}},

第二种办法：在table column外进行设置

{
field : "url",
title : "发帖地址",
cellStyle:formatTableUnit,
formatter :paramsMatter
}//表格超出宽度鼠标悬停显示td内容
function paramsMatter(value,row,index) {
var span=document.createElement("span");
span.setAttribute("title",value);
span.innerHTML = value;
return span.outerHTML;
}
//td宽度以及内容超过宽度隐藏
function formatTableUnit(value, row, index) {
return {
css: {
"white-space": "nowrap",
"text-overflow": "ellipsis",
"overflow": "hidden",
"max-width":"150px"
}
}
}

Bootstrap table列内容过长，显示固定长度，超过内容隐藏相关推荐

table表格信息过长显示省略，悬停显示详细信息；表格添加细边框
一.table表格信息过长显示省略...,悬停显示详细信息需求:表格td宽度设置百分比或者固定宽度,如果内容过长自动截掉并在文本末尾显示...,鼠标移动到文字上面显示全部内容: (基于bootstr ...
css内容过长显示省略号的几种解决方法
css内容过长显示省略号的几种解决方法参考文章: (1)css内容过长显示省略号的几种解决方法 (2)https://www.cnblogs.com/sinceForever/p/11350332. ...
文本内容过长显示省略号
一.单行文本内容过长 /*overflow 属性规定当内容溢出元素框时发生的事情. 当值为hidden内容会被修剪,并且其余内容是不可见的.*/ overflow: hidden;/*white-sp ...
bootstrap table 列拖动变宽
需要导入 colResizable-1.6.min.js /**_ _____ _ _ _ | | __ \ (_) | | | | ___ ___ | | |__) |___ ___ _ _____ ...
Bootstrap Table列宽拖动的方法
Bootstrap Table可拖动列,需要用到它的Resizable扩展插件需要引入 bootstrap-table扩展插件 bootstrap-table-resizable.js 这个插件还依 ...
vue element 下拉框内容过长显示...鼠标悬浮显示全部
1.1. css 多选下拉框内容过长-用...代替 /*下拉选择框-多选-内容过长-用...代替 begin */ .el-tag.el-tag--info {background-color: ...
span标签显示固定长度显示省略号，光标放上显示全部
固定长度显示省略号 max-width: 10em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /*超出部分用.. ...
table中的td内容过长显示为固定长度，多余部分用省略号代替
如何使td标签中过长的内容只显示为这个td的width的长度,之后的便以省略号代替. 给table中必须设置属性: table-layout: fixed; 然后给 td 设置: white-spac ...
Table_Vue table 表格中显示内容过长显示省略号_并且显示提示---SpringCloud Alibaba_若依微服务框架改造_前端ElementUI---工作笔记010
<el-table-column :show-overflow-tooltip="true"> </el-table-column> 加上 :show-ov ...

Bootstrap table列内容过长，显示固定长度，超过内容隐藏

Bootstrap table列内容过长，显示固定长度，超过内容隐藏相关推荐

最新文章

热门文章